1_Vue2基本指令
-
引入vue:
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 引入后有一个构造函数Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <div id="app"> <h1>{{message}}</h1> //使用{{ 属性 }} 的方法调用数据 <p v-text="name"></p> //使用标签属性的方式把 v-text="属性" 写在标签属性中 的方法调用数据 <p>姓名：{{name}}，年龄：{{age}}</p> <p v-html="abc"></p> //要将标签也识别出来用 v-html="属性" <a href="http://www.pika.com" v-show="pika">皮卡的主页</a> <br> <a href="https://www.baidu.com" v-show="mint">薄荷主页</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ //指定一个选择器，代表再该元素中使用vue来渲染DOM。 el 固定写法 el: '#app', //数据，一般情况下数据来源于后端（通过ajax请求），在学习过程中，我们先直接写 data: { // 这里的属性名，不是固定写法，是我们自己定义的 message: 'Hello Vue!', name:'小火柴', age:18, abc:"<em><b>这是一个斜体标签</b></em>" , pika : false, //属性为false后 皮卡的主页 将在页面不显示 mint : true //属性为true mint主页 将在页面显示 } }) </script> -
指令表达式写法
<div id="wrap"> <p>{{name + "ABC" + age}}</p> //pikaABC18 中间拼接的字符串需要用引号""括起来。最里层{ }里面实际上是js表达式 <p>{{bool?name:age}}</p> //皮卡 三木表达式 <p v-text="name+'ABC'+age"></p> //皮卡ABC18 <p v-text=`${name}abc${age}`></p> //皮卡abc18 模板字符串写法 </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { name : "皮卡", age : 18, bool : true } }); </script> -
v-if和v-else
例1： <div id="wrap"> <a href="" v-if="bool">皮卡的主页</a> <!-- 如果为真 显示“皮卡的主页”， --> <a href="" v-else-if="name==='皮卡'">22222</a> <!-- 满足第一个条件就停止，都不满足显示else --> <a href="" v-else>薄荷</a> <!-- 否则显示 v-else --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { bool : false, name : "皮卡" } }); </script> <!-- 注意的是：v-if和v-show的区别是，v-if不会渲染到页面中去，二v-show回在标签中添加style="display: none;" 两个指令中间不能有任何其他指令，但多个else是可以的，满足第一个条件就停止 --> ------------------------------------------------------------------------------------------------------- 例2： <div id="wrap"> <a href="" v-if="bool">AAA</a> <a href="" v-else-if="name==='皮卡'">BBB</a> <a href="" v-else-if="bool2">CCC</a> <a href="" v-else>DDD</a> <p>{{name}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el : "#wrap", data : { bool : false, bool2 : true, name : "皮卡" } }); //data这个对象的属性，全部会交给vm这个实例来管理，也就是说可以通过vm.name 来操作name的值列如： //将 vm.name='银时'，那么上面条件2就会变化为false，页面直接会显示 CCC，name 的值也会变成 银时 //数据的变化能够实时的反映到DOM中 </script> -
v-on 事件绑定
例1：鼠标事件：点击增加和减少按钮，改变num的值： <div id="wrap"> <p>数量：{{num}}</p> <!--<button v-on:click="add">增加</button> <button v-on:click="reduce">减少</button>--> <button @click="add">增加</button> <button @click="reduce">减少</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { num : 0, }, /*methods 参数3 定义各种函数*/ methods : { add(){ //这里的函数名：add()、reduce() 是自定义的 this.num ++; }, reduce(){ if( this.num <=0 )return //可以加个条件，如果num<0就不在减小 this.num --; } } }); </script> 例2：键盘事件：按键盘任意键改变num值和按键盘enter键改变num值 <div id="wrap"> <p>{{num}}</p> <input type="text" @keydown="add"><br> <!-- 按任意键改变num值 --> <input type="text" @keydown.13="add"><br> <!-- 按键值为13的键，改变num值 --> <input type="text" @keydown.enter.space="add"> <!-- 按键名为enter或者space键，改变num值 --> <input type="text" @keydown.ctrl.z="add"> <!-- 同时按ctrl+z键，改变num值 --> <button @click.once="add">只触发一次</button><br> <!-- 只触发一次(左键)，改变num值 --> <button @click.left="add">只有左键触发</button><br> <!-- 只有左键触发，改变num值 --> <button @click.right="add">只有右键触发</button><br> <!-- 只有右键触发，改变num值 ，右键会有默认事件 --> <button @click.middle="add">只有中键触发</button><br> <!-- 只有中键触发，改变num值 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { num : 0, }, methods : { add(){ this.num ++; } } }); </script> 例3：冒泡和阻止冒泡/阻止默认事件 <div id="wrap"> <p>{{num}}</p> <div @click="add"> <button @click="add">点击会触发两次</button> <!-- 点击一次会触发num+2.冒泡 --> </div> <div @click="add"> <button @click.stop="add">阻止冒泡</button> <!-- 阻止冒泡 --> </div> <button @click.right.prevent="add">右键触发，并且阻止默认事件</button><br> <!-- 阻止右键的默认事，并且右键点击事件 --> <a href="http://www.baidu.com" @click.prevent="add">a标签</a> <!-- 阻止a标签的点击事件，并且左键点击事件 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { num : 0, }, methods : { add(){ this.num ++; } } }); </script> 例4：绑定多个事件 <style> .goudan{ display: block; width:50px; height: 50px; background-color: pink; } </style> <div id="wrap"> <p>{{num}}</p> <!-- 方法一：将所有事件写在v-on对象中，用v-on 可以在对象中绑定多个事件 格式 (事件:事件函数) ,但是若有默认事件和冒泡的话，不能阻止，需要用另外方法。 --> <a href="https://www.baidu.com" class="goudan" v-on="{ click:add,mouseenter:reduce }" ></a> <!-- 方法二：将有默认和冒泡的事件单独简写，这样就能写阻止默认事件 --> <a href="https://www.baidu.com" class="goudan" @click.prevent="add" <!-- 阻止a标签跳转 --> v-on="{ mouseenter:reduce }" ></a> <!-- 方法三：将每个事件都以简写的方法单独写 --> <a href="https://www.baidu.com" class="goudan" @click.left.prevent="add" @click.right.prevent="add" @mouseenter="reduce" ></a> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el : "#wrap", data : { num : 0, }, methods : { add(){ this.num ++; }, reduce(){ this.num --; } } }); </script> -
总结：Vue的指令
<p v-text="name"></p> ：渲染数据 <p v-html="name"></p> ：渲染数据，可解析标签 <p v-show="name"></p> ：控制一个元素显示和影藏，本质是给标签添加 style="display: none;"属性来控制标签显隐。页面渲染后没有 v-show指令 <a href="" v-if="bool">狗蛋的主页</a> <!-- 如果为真 显示“狗蛋的主页”， --> <a href="" v-else-if="bool2">CCC</a> <a href="" v-else>大锤的主页</a> <!-- 否则显示 “大锤的主页” --> v-if和v-else同时配合使用的，在页面中不会有任何代码渲染 <button v-on:click="add">增加</button> <!-- 绑定点击事件，v-on后面可以跟鼠标事件、键盘事件等事件 --> <button @click="add">增加</button> <!-- v-on:click可简写为@click --> <button v-on:mouseenter="add">增加</button> <!-- 鼠标移入事件也可以简写为 @mouseenter --> <input type=" text" v-model= "msg"> <!-- 页面的变化引起数据的变化，又引起页面的变化 -->
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
