vue.js学习笔记

    xiaoxiao2021-03-25  257

    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 循环渲染 等
    转载请注明原文地址: https://ju.6miu.com/read-209.html

    最新回复(0)