<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本指令</title> </head> <body> <div id="app"> <!-- 1)插值表达式--> <p>{{ msg }}</p> <p>{{ 1+2*3+‘条‘+msg }}</p> <!-- 2）v-text--> <p v-text="msg"></p> <p v-text="‘msg‘"></p><!-- 取消转译 --> <!-- 3）v-html：能解析html代码语法--> <p v-text="html_msg"></p> <p v-html="html_msg"></p> <!-- 4）v-once:结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变--> <input type="text" v-model="val"> <p>{{ val }}</p> <p v-text="val"></p> <p v-html="val"></p> <p v-once>{{ val }}</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { msg: ‘你是p‘, html_msg: ‘<b>html代码语法是否解析</b>‘, val: ‘000‘ } }) </script> </html>
# 1.v-bind:属性名="变量" # 2.简写=>> :属性名="变量" # 3. :class="变量"| :class="{类名:is_able}"| :class="[类1变量，...，类n变量，]"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性指令</title> <style> .cls_a { width: 200px; height: 200px; background-color: yellowgreen; } .cls_b { text-align: center; line-height: 200px; border-radius: 50%; } </style> </head> <body> <!--属性指令：v-bind--> <div id="app"> <!--1)自定义属性绑定变量--> <p v-bind:abc="a"></p> <!-- 2)title属性--> <p title="鼠标悬浮的文本提示">这个一个p段落</p> <p v-bind:title="my_title">这个一个p段落</p> <!-- 3)class属性--> <!-- 重点：v-bind:可以简写为 ：--> <p :class="my_class">这个一个p段落</p> <!-- {类名：类是否起作用，。。。}类是否起作用 写的是变量，变量的值为true或false--> <!-- 应用场景：通过一个变量真假控制一个类名是否起作用--> <p :class="{x:1,y:0,z:is_able}">这个一个p段落</p> <!-- [类名1，...，类名n]：多类名，每个类名既可以是字符串常量也可以是变量--> <p :class="[o,p,q,‘oqp‘]">这个一个p段落</p> <!-- 多类名综合使用--> <p :class="[o,p,q,‘oqp‘,{k:true},{h:false}]">这个一个p段落</p> <!-- 4)style属性--> <p :style="my_style">这个一个p段落</p> <p :style="{color:‘red‘,backgroundColor:yellow}">这个一个p段落</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { a: ‘A‘, my_title: ‘鼠标悬浮的文本提示‘, my_class: ‘cls_a cls_b‘, is_able: true, o: ‘O‘, p: ‘P‘, q: ‘Q‘, my_style: { color: ‘red‘, // ‘font-size‘:‘30px‘, fontSize: ‘30px‘ }, yellow: ‘greenyellow‘ } }) </script> </html>
# 指令: v-on:事件名="方法变量" # 简写: @事件名="方法变量" # 简写: @事件名="方法变量()" =>不是方法的调用，而是用于传参 # 简写: @事件名="方法变量(‘普通参数‘，‘$event‘)"=>$event是事件参数，可以通过它得到鼠标点击的相关信息
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件指令</title> <style> body { /*不允许页面文本被选中*/ user-select: none; } </style> </head> <body> <!--指令：v-on:事件名=‘变量‘--> <!--简写:@事件名=‘变量‘--> <div id="app"> <p v-on:click="fn1" :style="{color:m_c}">{{ msg }}</p> <p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5 ">{{ msg }}</p> <!-- 事件需要参数时--> <!-- 注意：事件绑定 方法名() 等价于 方法名，不能调用方法，而是作为传参的标志--> <p @click="func(‘abc‘)">{{ msg }}</p> <!-- 类别django传参的应用场景，可以标志具体点击的是哪个li--> <!-- {% for %}--> <!-- <li @click="fun({{ forloop.index }})"></li>--> <!-- {% end for %}}--> <p @click="func1($event)">{{ msg }}</p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { msg: ‘你是p‘, m_c: ‘red‘, }, methods: { func1: function (ev) { console.log(ev); //数据点击页面的点击点 console.log(ev.clientX); console.log(ev.clientY) }, func: function (txt) { this.msg = txt }, fn1: function () { if (this.m_c == ‘red‘) { this.m_c = ‘blue‘ } else { this.m_c = ‘red‘ } }, fn2: function () { this.msg = ‘鼠标悬浮了‘ }, fn3: function () { this.msg = ‘鼠标离开了‘ }, fn4: function () { this.msg = ‘鼠标按下了‘ }, fn5: function () { this.msg = ‘鼠标抬起了‘ } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单指令</title> </head> <body> <div id="app"> <!-- 指令:v-model="变量"--> <form action="" method="get"> <!-- 1)数据的双向绑定--> <!-- 注意一定要加name属性--> <input type="text" v-model="msg" name="username"> <input type="password" v-model="msg" name="password"> <!-- 2)单选框:value必须设置初值，v-model变量值要与单选框的value值统一 --> <p> 男:<input type="radio" name="sex" value="male" v-model="sex_val"> 女:<input type="radio" name="sex" value="female" v-model="sex_val"> </p> <!-- 3）单一复选框--> <p> <!-- v-model绑定的变量值与true-value|false-value统一 --> <!-- true-value|false-value默认值为 true|false --> 是否同意条款:<input type="checkbox" name="agree" v-model="agree_val" true-value="同意" false-value="不同意"> </p> <!-- 4)多复选框--> <!-- v-model绑定的变量是存放多复选框value的数组(列表)--> <p> 爱好: 爱好男的：<input type="checkbox" value="爱好男的" name="cless" v-model="more_val"> 爱好女的：<input type="checkbox" value="爱好女的" name="cless" v-model="more_val"> 不挑：<input type="checkbox" value="不挑" name="cless" v-model="more_val"> </p> <button type="submit">提交</button> </form> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { msg: ‘‘, sex_val: ‘female‘,//默认value="female"的单选框被选中 agree_val: ‘不同意‘, more_val: [‘爱好男的‘, ‘爱好女的‘] } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>条件指令</title> <style> .box { width: 200px; height: 100px; background-color: darkgray; } .pag1 { background-color: red } .pag2 { background-color: yellow } .pag3 { background-color: blue } </style> </head> <body> <div id="app"> <!-- v-if与v-show的变量值都是bool，控制着显隐--> <!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏--> <!-- 特殊属性key是vue在内存中建立缓存的标志，来优化渲染的效率--> <p v-if="is_if" key="my_if">v-if的显示与隐藏</p> <p v-show="is_show" key="my_show">v-show的显示与隐藏</p> <p> <button @click="btn_click(‘pg1‘)">红</button> <button @click="btn_click(‘pg2‘)">黄</button> <button @click="btn_click(‘pg3‘)">蓝</button> <div class="box pag1" v-if="pg == ‘pg1‘" key="pg1"></div> <div class="box pag2" v-else-if="pg == ‘pg2‘" key="pg2"></div> <div class="box pag3" v-else key="pg3"></div> </p> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { is_if: true, is_show: true, pg: ‘pg1‘ }, methods: { btn_click: function (pg_num) { this.pg = pg_num } } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循环指令</title> <style> p { padding-left: 30px; } </style> </head> <body> <div id="app"> <p>{{ array[1] }}</p> <p>{{ person[‘age‘] }}</p> <div>循环array</div> <p v-for=" v in array">{{ v }}</p> <div>带索引循环array</div> <p v-for="(v,i) in array">{{ v }}索引是{{ i }}</p> <div>循环person</div> <p v-for="v in person">{{ v }}</p> <div>带key循环person</div> <p v-for="(v,k) in person">{{ v }}键是{{ k }}</p> <div>带key带索引循环person</div> <p v-for="(k,v,i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p> <div>循环persons</div> <ul v-for="person in persons"> <li v-for="(v,k) in person">{{ k }}:{{ v }}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { array: [‘ios‘, ‘android‘, ‘winPone‘], person: {‘name‘: ‘Jobs‘, ‘age‘: 88, ‘gender‘: ‘男‘}, persons: [ {‘name‘: ‘Jason‘, ‘age‘: 58}, {‘name‘: ‘Jerry‘, ‘age‘: 68}, {‘name‘: ‘Owen‘, ‘age‘: 17}, ] } }) </script> </html>
<script> array = [1, 2, 3, 4, 5]; console.log(array); //从index开始往后操作length长度，替换args // array.splice(index,length,args); // array.splice(2, 3, 9, 9);//[1, 2, 9, 9]替换 // array.splice(2, 3);//[1, 2]删除 array.splice(2, 0, 8);//[1, 2, 8, 3, 4, 5]插入 console.log(array); </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>todoList案例</title> </head> <body> <div id="app"> <input type="text" v-model="txt"> <button @click="send_msg">留言</button> <ul> <li v-for="(msg,i) in msg_array" @click="delete_msg(i)">{{ msg }}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: ‘#app‘, data: { txt: ‘‘, msg_array: [], }, methods: { send_msg: function () { if (this.txt) { this.msg_array.push(this.txt); this.txt = ‘‘ } }, delete_msg: function (index) { this.msg_array.splice(index, 1) } } }) </script> </html>
原文：https://www.cnblogs.com/ShenJunHui6/p/10864100.html