vue.js

模板语法

插值
1.文本

<div id="app">  <p>{{ message }}</p></div><script>new Vue({  el: '#app',  data: {    message: 'Hello Vue.js!'  }})</script>

2.html （使用v-html）

<div id="app">    <div v-html="message"></div></div><script>new Vue({    el:"#app",    data:{        message="<h1>大宝</h1>"    }})</script>

3.属性
(v-bind)

<div id="app">    <div v-bind:class="{'class1': class1}">    </div></div><script>new Vue({    el:"#app",    data:{        class1:true    }})</script>

4.表达式
Vue.js 都提供了完全的 JavaScript 表达式支持

指令
指令是带有 v- 前缀的特殊属性

判断v-if      例: <div v-if="see"></div>  //根据see的值(true或false)来决定是否插入元素。v-else    例: <div v-else></div>//可以用 v-else 指令给 v-if 添加一个 "else" 块v-else-if 例:<div v-else-if="type === 'B'">B</div>//用作 v-if 的 else-if 块,可以链式的多次使用显示v-show 例:<h1 v-show="ok">Hello!</h1>//根据条件展示元素v-bind:属性名  例:<a v-bind:href="url">大宝</a>//设置属性值  缩写  :   例<a :href="url">大宝</a><div v-bind:class="[activeClass, errorClass]"></div>  <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>//三元表达式<div v-bind:style="{color:color}">更改样式</div>多个样式<div v-bind:style="[baseStyles, overridingStyles]">多个样式</div>v-on:事件名  例:<a v-on:click="doSomething">例:<form v-on:submit.prevent="onSubmit"></form>  //监听DOM事件 .修饰符 用于指出一个指定应该以特殊方式绑定缩写  @      例<a @click="doSomething">大宝</a>v-model    例:<input v-model="message"> //数据绑定   单选框或多选框 v-model的值等于value值的被选中select列表 v-model="" 值设为空,默认选取选中option的value中修饰符 .lazy 同步input输入框的值,在change事件中同步.number 如果想自动将用户的输入值转为 Number 类型.trim  自动过滤用户输入的首尾空格循环v-for 例：<li v-for="迭代别名 in 原数组">{{迭代别名.键名}}</li><li v-for="value in 原数组">{{value}}</li><li v-for="(value,key) in 原数组">{{key}}:{{value}}</li><li v-for="(value,key,index) in 原数组">{{index}}.{{key}}:{{value}}</li>  //index为索引<li v-for="n in 10">{{ n }}</li>  //迭代整数

过滤器

A为值，其|后的所有内容为过滤器{{A|B}}<div v-bind:id="A|B"></div>串联 {{A|B|C}}{{A|arr('B',C)}}  //A是第一个参数,B将传给过滤器为第二参数，C的值将作为第三个参数

构造器

 var vm= new Vue({ })vm.a  ....  vm.$data  ... Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分

样式

data:{        class1:true       }    //定义数值methods: {    函数名: function () {        ....    }   //定义函数computed:{    函数名: function () {        ....       数值名:{        //get 获取值时触发，与setter是没有必然联系的            get:function(){            },        //set 设置值时触发            set:function(newValue){            }       }    }    //计算属性,在处理一些复杂逻辑时 一般用法是改变data里面的值，作为自己的值}methods与computed 效果一样。区别:computed基于它的依赖缓存，只有相关依赖发生改变时才会重新取值methods 在重新渲染时，函数总会重新调用执行filters: {    过滤器名: function (value) {       ....    }}   //定义过滤器函数 

v-on事件修饰符
修饰符可以串联

.stop           阻止单击事件冒泡.prevent        提交事件不再重载页面.capture        添加事件侦听器时使用事件捕获模式.self           只当事件在该元素本身,不是子元素 触发时触发回调.once           click 事件只能点击一次.native         某个组件的根元素上监听一个原生事件

组件

注册组件Vue.component(组件名,配置选项)调用  <组件名></组件名>

全局组件
所有实例都能用全局组件

<div>    <组件名></组件名></div>Vue.component('组件名',{    template:'<h1>...</h1>'})

局部组件

 var hh={        template:"<h2>哼</h2>" }new Vue({    el:'#app',    components:{        runner:hh    }})调用：  <runner></runner>注意  此例中，只能在div id=app 中才生效

prop
是父组件用来传递数据的一个自定义属性
父组件的数据需要通过props把数据传给子组件，子组件需要显示地用props选项声明“prop”

 <child message="hello!"></child>Vue.component('child', {  // 声明 props  props: ['message'],  // 同样也可以在 vm 实例中像 "this.message" 这样使用  template: '<span>{{ message }}</span>'})        显示hello!

动态prop
v-bind 和prop结合

<div id="app">        <runner v-bind:message="rack"></runner>    </div>    Vue.component('runner',{        props:['message'],        template:"<h1>{{message}}</h1>"    })    new Vue({        el:"#app",        data:{            rack:"十一月"        }    })  显示  十一月

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来

prop验证
组件可以为props 指定验证要求
prop是一个对象而不是字符串数组时,它包含验证要求

Vue.component('example',{    props:{        //基础类型检测（'null' 意思是任何类型都可以        ）        propA:Number,        //多种类型        propB:[String,Number],        //必传且是字符串        propC:{            type:String,            required:true        },        //数字，有默认值        propD:{            type:Number,            default:100        },        //数组/对象的默认值应当由一个工厂函数返回        propE:{            type:Object,            default:function(){                return {message:"hello"}            }        },        //自定义验证函数        propF:{            validator:function(value){                return value>10            }        }       }})

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

自定义指令

directives:{    //注册一个局部的自定义指令 v-focus}