实例
<div :class = '{ "size": true , "bg": true }'></div> <div :class = '{ size: true , "bg": true }'></div> <div :class = '{ size: f , "bg": f }'></div> <div :class = '{ size: "5>3" , "bg": f }'></div> <div :class = '{ size: fn() , "bg": f }'></div>:
介绍:
对象形式里面支持变量,字符串,函数名(调用),表达式等等js语法。
补充修改:
对象中的key如(size)带不带引号都是原样输出size,没有变量一说
实例:
//模板的语法格式 <div :class = '["size","bg"]'></div> <div :class = '[size,bg]'></div> <div :class = '[f?size:"",bg]'></div> <div :class = '[classAdd(),bg]'></div> //Vue的实例配置 new Vue({ el: '#app', data: { f: true, size: "size", bg: "bg" }, methods: { fn(){ return 5>3 }, classAdd(){ return f? this.size : "" } } })介绍:
数组形式同理对象形式,里面支持变量,字符串,函数名(调用),表达式等等js语法。
补充修改:
对象中的key如(size)带不带引号都是原样输出size,没有变量一说
对象形式较数组形式而已,比较复杂,所以推荐在项目中使用数组的形式来进行class的绑定。
实例:
<div :style = "{'width':'100px','height':'100px','background':'red'}" ></div> <div :style="{width:size,'height':size,'background':color}"></div>介绍:
对象形式里面支持变量,字符串,函数名(调用),表达式等等js语法。
样式是以键值对的形式展现的。
补充修改:
对象中的key如(size)带不带引号都是原样输出size,没有变量一说
实例:
//模板的语法格式 <div :style="[{'width':'100px'}, {'height':'100px'}, {'background':'red'}]" > </div> <div :style="[arrSize,arrBg]" > </div> //Vue的实例配置 new Vue({ el: '#app', data: { size: '100px', color: 'red', width: 'width', arrSize: { width: '100px', height: '100px', margin: '10px' }, arrBg: { background: 'red' \ } } })介绍:
数组形式同理对象形式,里面支持变量,字符串,函数名(调用),表达式等等js语法。
补充修改:
对象中的key如(size)带不带引号都是原样输出size,没有变量一说
对象形式较数组形式而言,虽然较简单,但是在项目中我们往往把模板里面数组的元素写成变量,在Vue实例中配置data选项的数组变量,这样子更能清晰的表达样式,所以推荐在项目中使用数组的形式来进行class的绑定。
但是呢,在项目中我们并不推荐写行内样式,因为我们的优良传统都是结构、样式和行为进行分离,但项目中如有进行样式覆盖的情况我们为了工作效率和实用性可以使用行内样式的绑定。
Vue本身是一款非常优秀的前端框架,通过简洁的API提供高效的数据绑定和灵活的组件系统,其核心思想是 “数据驱动的组件系统”。Vue在进行进行插值处理和 绑定表达式时使用了一种叫Mustache模版引擎。
Mustache是常见的Web模板引擎中的一种,这些年随着前端的不断发展,基于javascript的模版引擎越来越多。目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等。
Mustache是一个logic-less(轻逻辑)模板解析引擎,它的优势在于可以应用在Javascript、PHP、Python、Perl等多种编程语言中。
直接匹配data里面的键名,将对应的值进行渲染
{{#keyName}} {{/keyName}}以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染
{{^keyName}} {{/keyName}}该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。
{{.}}{{.}}表示枚举,可以循环输出整个数组
{{<partials}}以>开始表示子模块,如{{> address}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块
{{{keyName}}}{keyName}}输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}
{{!comments}}!表示注释,注释后不会渲染输出任何内容
在项目里面我们将template放在最外面,v-for等指令放在li里面
函数形式:
computed: {//字符串反向输出 //多个计算属性 计算属性可以是函数 newStr(){ return this.str.split('').reverse().join('') } }对象形式:
对象形式用到了getter和setter,其中Vue自带了get方法,set方法需要我们自己来定义。
computed: { //多个计算属性 计算属性可以是函数 newStr: { get(){ //vue内部提供了 return this.str.split('').reverse().join('') }, set(){ //我们自定义的 } } }5.2和 5.3参考https://www.cnblogs.com/widgetbox/p/8954162.html
在全局Vue构造器函数中添加自定义的混入属性,从而在每个Vue实例中都能使用,所以全局混入不推荐使用的,请谨慎使用全局混入。
Vue.mixin({ methods: { cc(){ console.log('cc') } } })6.2 局部的混入
在外部定义一个 对象 , 这个对象中可以书写组件的任意选项,在根实例(组件)中通过一个mixins的配置项引入即可。
外部对象:
var myMixin = { methods: { aa(){ console.log(' 明天情人节快乐' ) } } }Vue实例:
var vm = new Vue({ el: '#app', data: { a: 1, b: 2 }, methods: { bb(){ console.log( '给他评论' ) } }, mixins: [myMixin] })以首字母大写过滤器为例:
Vue.filter('capitalize',function(value){ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })以首字母大写过滤器为例:
new Vue({ data: { msg: 'hello vue.js' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }).$mount('#app')此处有个补充知识点:
当未在Vue根实例配置项定义el属性这个作用范围时,我们可以在根实例后面.$mount(’#app’)来设置作用范围。