vuejs组件的重要选项 datamethodswatch模板指令 html和bue对象的粘合剂模板指令 v-if 和 v-show模板指令v-for模板指令 v-on模板指令 v-bind小结

vue.js组件的重要选项

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

1. data

vue所有的数据都是放在data里的

<p>{{a}}</p> <script> new Vue({ data:{ a: 1, b: [] } }) </script>

2. methods

new Vue({ data： { a: 1, b: [] }, methods: { doSomething: function(){ console.log(this.a) } } })

3. watch

监听

new Vue({ data： { a: 1, b: [] }, methods: { doSomething: function(){ console.log(this.a) } }, watch: { 'a':function(val,oldVal) { //监听data域里a的变化 console.log(val,oldVal) } } })

4. 模板指令 —— html和bue对象的粘合剂

数据渲染：v-text、v-html、{{ }}

在字符串中有html标签的时候，v-text会把所有的内容当做字符串来渲染，但是v-html会渲染字符串中的html标签。

<p>{{a}}</p> <p v-text="a"></p> <!--methods方法对data域的a进行数据处理的话，会随之改变 --> <p v-html="a"></p> <script> new vue({ data: { a: 1, b: [] } }) </script>

5.模板指令 —— v-if 和 v-show

控制模块隐藏：v-if 、v-show

<p v-if="isShow"></p> <!-- v-if不渲染dom元素 --> <p v-show="isShow"></p> <!-- v-show通过css的display来控制隐藏，能够看到dom元素 --> <script> new vue({ data: { isShow: true } }) </script>

6. 模板指令——v-for

渲染循环列表：v-for

<ul> <li v-for="item in items"> <!--items 是data域里的对象 --> <p v-text="item.label"></p> </li> </ul> <script> new vue({ data: { items: [ {label:'apple' }, {label:'banana' } ] } }) </script>

7. 模板指令 —— v-on

事件绑定：v-on

<button v-on:click="doThis"></button> <button @click="doThis"></button> <!-- @与v-on等价, 是一种简写形式 --> <script> new vue({ methods: { doThis: function(someThing) { //... } } }) </script>

8. 模板指令—— v-bind

属性绑定：v-bind

<img v-bind:src="imageSrc"> <!-- 也可以写作 :src ,v-bind与:等价--> <!-- 字符串 --> <div :class="{ red: isRed }"></div> <!-- 布尔值 --> <div :class="[classA, classB]"></div> <!-- 字符串 --> <div :class="[classA, {classB: isB, classC:isC }]"></div> <!-- classA字符串, isB和isC是用来判断classB与classC是否展现的，classB与classC就是展现出来的字符串，就是key最终展现出来的样子，而不是被赋了什么值 -->

9. 小结

new 一个vue对象的时候可以设置他的属性，其中最重要的包括三个：分别是data、methods、watch。其中data代表vue对象的数据（model层），methods代表vue对象的方法，watch设置了对象监听的方法。vue对象里的设置通过html指令进行关联重要的指令包括 v-text 渲染数据v-if 控制显示v-on 绑定事件v-for 循环渲染 等