Loading... # Vue学习笔记 ## 一、VUE常用指令 1. **v-if & v-show** 控制某个html元素的显示与隐藏：只有当v-if判断的属性为ture时才会显示，一般常用`v-if`指令。 e.g. ```vue <div id="app"> <div v-if="true">one</div> <div v-if="false">two</div> </div> <!-- 执行上述指令只输出第一条div中的内容 --> ``` 2. **v-else** 搭配`v-if`使用，当`v-if`条件判断为false时执行`v-else`中的指令。 3. **v-else-if** 搭配`v-if`使用，当`v-if`条件判断为false时执行`v-else-if`中的指令。 4. **v-for** 用于在html模板中循环输出一部分内容。 e.g. ```vue <div id="app"> <ul> <li v-for="dog_name in dogs">{{ dog_name }}</li> </ul> </div> <script> new Vue({ el:'#app', data:{ dogs:['Rex','Rover','Alan'] } }); </script> <!-- 以下为上述vue指令中输出的html页面显示内容 --> <div id="app"> <ul> <li>Rex</li> <li>Rover</li> <li>Alan</li> </ul> </div> ``` 当需要使用data中的键值对形式时，可以使用如下的vue指令： e.g. ```vue <div id="app"> <ul> <li v-for="(rent, city) in Rent">{{city }}的房价租金为{{ rent }}美元</li> </ul> </div> <script> new Vue({ el:'#app', data:{ Rent:{ london: 1650, paris: 1730, NYC: 3680 } } }); </script> <!-- 以下为上述vue指令中输出的html页面显示内容 --> <!-- 在Vue中键值对的for循环中，引用参数的顺序是：(value, key) --> <div id="app"> <ul> <li>london的房价租金为1650美元</li> <li>paris的房价租金为1730美元</li> <li>NYC的房价租金为3680美元</li> </ul> </div> ``` 5. **v-bind** 可以接收参数，v-bind指令用于将一个值绑定到一个HTML属性上。 e.g. ```vue <div id="app"> <ul> <button v-bind:type="buttonType">BUTTON1</button> <!-- v-bind指令还可以省略，写成如下形式 --> <button :type="buttonType">BUTTON2</button> </ul> </div> <script> new Vue({ el:'#app', data:{ buttonType: 'submit' } }); </script> <!-- 以下为上述vue指令中输出的html页面显示内容 --> <button type="submit">BUTTON1</button> <button type="submit">BUTTON2</button> ``` `v-bind`是指令的名称，type是指令的参数，这个指令对disabled和checked之类的属性同样有效：如果传入的表达式为真，则输出的元素会带有这个属性；如果为假，元素则不会带有这个属性。 e.g. ```vue <div id="app"> <ul> <button :disabled="buttonDisabled">BUTTON3</button> </ul> </div> <script> new Vue({ el:'#app', data:{ buttonDisabled: true } }); </script> <!-- 以下为上述vue指令中输出的html页面显示内容 --> <button disabled="ture">BUTTON3</button> ``` 6. **v-model** 可实现双向数据绑定，当script中的data数据改变时，在html页面上也会随之改变。在html中使用input元素接收某个数据时，script中的data数据也会随之改变。 e.g. ```vue <template> <div id="app"> <input type="text" v-model="inputText" /> <p>inputText:{{ inputText }}</p> </div> </template> <script> new Vue({ el: 'app', data: { inputText: 'initalValue' } }); </script> ``` 7. **v-on** 将事件侦听器绑定到元素上。这个指令将事件名称作为参数，然后将事件侦听器作为传入值。 e.g. ```vue <template> <div id="app"> <button v-on:click="selfIncrease">点击增加次数</button> <!-- 或者可以简写成如下形式 --> <button @click="selfIncrease">点击增加次数</button> <p>你已经点击了{{ counter }}次</p> </div> </template> <script> new Vue({ el: '#app', data: { counter: 0 }, methods: { selfIncrese(e){ this.counter++; } } }); </script> ``` ## 二、模板、数据、指令 1. 指令：如第一部分所说的，为HTML元素添加的特殊的属性，被称为指令。例如`v-if`，`v-for`等。 数据：在script中定义的，初始化html页面时创建的**data**成为数据，数据在模板中使用`{{ dataName }}`暂时表示。 模板：一段特定的html代码，一般写在VUE文件中的template元素内。 2. 双向数据绑定： 在第一部分中`v-bind`所举例子都为单向数据绑定，即data对象中的数据只能显示在template元素中，但是template元素的改变并不能随之使得data对象中的数据改变。 使用`v-model`指令可实现双向数据绑定。 ## 三、方法、计算属性 1. **方法** 写在Vue中**method**模块内，可以理解为处理data对象的函数。 e.g. ```vue <template> <div id="app"> <ul> <li v-for="num in filterPositive(numbers)">{{ num }}</li> </ul> </div> </template> <script> new Vue({ el: '#app', data: { numbers: [3,-4,5,-6,7,-8,9,0] }, method: { // 该方法的作用时筛选出data对象中所有的非负数 filterPositive(numbers){ return numbers.filter((number) => number>=0); } } }); </script> ``` 2. **计算属性** 写在Vue中的**computed**模块内。计算属性与方法的异同点： - 可以缓存：如果在模板中多次调用一个方法，方法中的代码在每一次调用时都会执行一遍；但如果计算属性被多次调用，其中的代码只会执行一次，之后的每次调用都会使用被缓存的值。只有当计算属性的依赖发生变化时，代码才会被再次执行，所以适合处理一些潜在的资源密集型工作。 e.g. ```vue <template> <div id="app"> <p>数字的总和是：{{ numberTotal }}</p> </div> </template> <script> new Vue({ el: '#app', data: { numbers: [3,-4,5,-6,7,-8,9,0] }, method: { // 该方法的作用时筛选出data对象中所有的非负数 filterPositive(numbers){ return numbers.filter((number) => number>=0); } }, computed: { // 该计算属性用于计算data对象中所有数据之和 numberTotal(){ console.log('numbers series has changed'); return numbers.reduce((sum, val) => sum+val); } } }); </script> ``` - 除了能像上例展示的那样获取计算属性的值，还可以设置计算属性的值，并且在设置过程中做一些操作。实现这一点需要将计算属性由函数改为带有get和set属性的对象。 e.g. ```vue <template> <div id="app"> <p>数字的总和是：{{ numberTotal }}</p> </div> </template> <script> new Vue({ el: '#app', data: { numbers: [3,-4,5,-6,7,-8,9,0] }, method: { // 该方法的作用时筛选出data对象中所有的非负数 filterPositive(numbers){ return numbers.filter((number) => number>=0); } }, computed: { // 该计算属性用于计算data对象中所有数据之和，同时将数据和的新值与旧值之差插入到原对象数组中 numberTotal(){ get(){ return numbers.reduce((sum, val) => sum+val); } set(newVaule){ const oldValue = this.numberTotal; const difference = newVaule - oldValue; this.numbers.push(difference); } } } }); </script> ``` ## 四、侦听器、过滤器 1. **侦听器** 监听data对象属性或者计算属性的变化，写在watch模块内，监听data对象的某一属性直接使用属性名即可。 e.g. ```vue <script> new Vue({ el: '#app', data: { count: 10 }, watch: { count(){ //此处count的值发生变化 } } }); </script> ``` 2. **过滤器** 过滤器是一种在模板中处理数据的便捷方式，而且经常会在其他模板语言中见到。它们特别适合对字符串和数字进行简单的显示变化。写在filters模块内。 最后修改：2022 年 01 月 23 日 08 : 23 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用，请随意赞赏 ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付
