一、语法:
var vm = new Vue({})
二、对象
1.data:(创建实例时,会把所有值都反应到页面中)
A、设置:
var data = { 属性: 属性值}/[{ 属性: 属性值},{ 属性: 属性值},{ 属性: 属性值}...]
B、添加到实例上:
var vm = new Vue({
data: 设置属性属性值的名
})
// 1.vm.属性 = data.属性
// 2.改变属性值,都会影响到原始数据
// 3.创建实例后再添加新的属性不会成为响应式
C、Object.freeze(obj)防止已有属性被修改,若被修改,则报错,写在创建对象和实例中间;
//事件语法@事件="事件名=事件内容",如:
<button @click="foo = 'baz'">点我修改</button>
var obj = {
foo: '1+2'
}
//Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
三、值
1.插入文本:A.基本方法:<span>{{文本放入}}</span>
B.数据更新文本内容不改变 v-conce:<span v-conce>{{文本放入}}</span>
四、属性:
1.绑定属性 v-bind:html属性上,如div,应该使用v-bind:xxx="..."的指令(v-bind:id/href。。。。)
2.监听属性(即触发当前事件,则会做出的指令) v-on:
如:v-on:click=""
五、修饰符: .prevent (为后缀,表示执行event.preventDefault()即阻止元素发生默认的行为)
如:<form v-on:submit.prevent="onSubmit"> ... </form>为:提交表单,单不重新加载页面六、简写方式
1.绑定: v-bind: = :如:
<a v-bind:href="url"> ... </a> = <a :href="url"> ... </a>
2.监听事件: v-on: = @
如:
<a v-on:click="doSomething"> ... </a> = <a @click="doSometh ing"> ... </a>