vue学习 基本语法 列表简单操作,计数器
Vue基本语法
Mustache语法 {{ }} 也就魔板语言
基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <h1>{{message1}}</h1> <!-- 简单的拼接 --> <h1>{{message1 + '_' + message2}}</h1> <!-- 也可以这样 --> <h1>{{message1}}_{{message2}}</h1> <!-- 可以做算数,但是如果转换失败就是NaN --> <h1>{{message4 * 2}}</h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: 'helloworld1', message2: 'helloworld2', message3: 'helloworld3', message4: '1', }, }) </script> </body> </html>
v-once 被渲染的值只改变一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <h1>{{message1}}</h1> <h1 v-once>{{message1}}</h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: 'helloworld1', message2: 'helloworld2', }, methods: { changedata: function () { this.message1 += '数据变了' } }, }) //可以看到这次外界修改了message的值后加了v-once后不能改变值 app.changedata() </script> </body> </html>
v-html 以html的形式渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <h1>{{message1}}</h1> <!-- url表示以html的形式展示url --> <h1 v-html="message1"></h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: '<a href="http://www.baidu.com">百度一下</a>', }, }) </script> </body> </html>
v-text 和魔板一下,但是会覆盖文本,基本不用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <!-- v-text和魔板差不多,也是直接展示出来 --> <h1 v-text='message1'></h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: '<a href="http://www.baidu.com">百度一下</a>', }, }) </script> </body> </html>
v-pre 将代码中的{{}}显示出来,基本不用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <h1 v-pre>{{message1}}</h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: '<a href="http://www.baidu.com">百度一下</a>', }, }) </script> </body> </html>
v-cloak 可能会展示未编译标签的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app" v-cloak> <!-- 我们知道代码是从上到下执行的,当执行到这里,下面的js代码还没有执行,返回给用的的界面就是{{messages1}},为了缓解这个问题做出下面方案 --> <h1 >{{message1}}</h1> </div> <script src="../vue.js"></script> <script> setTimeout(function () { const app = new Vue({ el: '#app', data: { message1: '<a href="http://www.baidu.com">百度一下</a>', }, }) }) </script> </body> </html>
v-bind 标签属性绑定 -添加属性的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <img v-bind:src='message1' ></h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: "https://www.cnblogs.com/images/logo_small.gif", }, }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> <style> .bg{ background-color: blue; height: 100px; width: 100px; } .box{ border: 1px red solid; } </style> </head> <body> <div id="app"> <!-- <img v-bind:src='message1' ></h1> --> <!-- <div :class="['box','bg']"></div> ：class 这样写就等于 v-bind的写法> --> <!-- <div :class="ll"></div> 这样需要在下面data中绑定 --> <div :class="{bg:is_bg,box:is_box}"></div> <!--如果is_bg为true的情况下才展示bg的样式 --> <input type="button" value="changeclass" @click="changeclass"> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message1: "https://www.cnblogs.com/images/logo_small.gif", ll:['box','bg'], is_bg:true, is_box:true, }, methods:{ changeclass :function(){ this.ll = ['bg'] } } }) </script> </body> </html>
列表简单操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- v-for会在生成时自动解析 这种类似于python的 for item in movies 所以拿到item变成了一个变量--> <li v-for="item in movies">{{item}}</li> 如果要使用js追加列表的操作使用 app.movies.push('777')就行了 </ul> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#app', data: { movies: ['111', '222', '333', '444', '6666'], } }) </script> </body> </html>
计数器
v-on:click="" 绑定事件-click点击事件，简写@click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1> 当前计数:{{counter}}</h1> <button v-on:click="sub">-</button> <button v-on:click="add">+</button> </div> <script src="../vue.js"></script> <script> const app = new Vue ({ el:"#app", data:{ counter:0, }, methods:{ add:function(){ // this关键字表示当前对象,也就是app this.counter++ }, sub:function(){ this.counter-- }, } }) </script> </body> </html>
v-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <span v-if="number1==10000">电信公司</span> <span v-else-if="number1==10086">移动公司</span> <span v-else="number1==10010">联通公司</span> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { number1:10086, }, methods:{ } }) </script> </body> </html>
v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>helloworld</title> </head> <body> <div id="app"> <div>--for循环1--</div> <div v-for="game in games">{{game}}</div> <div>--for循环2--</div> <div v-for="(game,index) in games">{{index}}--{{game}}</div> <div>--for循环字典--</div> <div v-for="dict_game in dict_games">{{dict_game}}</div> <div>--for循环字典取值--</div> <div v-for="(value,key) in dict_games">{{value.d}}--{{value.e}}</div> <div>--for if结合--</div> <div v-for="(value,key) in dict_games"> <div v-if="dict_games.d==helloworld" >{{value.a}}</div> <div v-else>{{value.aa}}</div> </div> <div>--map for--</div> <div v-for="(value,key) in map_dict_games">{{value.d}}{{value.l[0]}}</div> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { games : [ '王者荣耀', '绝地求生', '荒野求生', '求生之路', '暗黑破坏神', ], dict_games :[{ 'd':'helloworld', 'e':'pench', 'a':'apple', 'aa':'banbans', }], map_dict_games:[ {'d':'helloworld1','e':'pench1','a':'apple1','aa':'banbans1','l':[ '王者荣耀1', '绝地求生2', '荒野求生3', '求生之路4', '暗黑破坏神5']}, {'d':'helloworld2','e':'pench2','a':'apple2','aa':'banbans2','l':[ '王者荣耀11', '绝地求生2', '荒野求生3', '求生之路4', '暗黑破坏神5']}, {'d':'helloworld3','e':'pench3','a':'apple3','aa':'banbans3','l':[ '王者荣耀1111', '绝地求生2', '荒野求生3', '求生之路4', '暗黑破坏神5']} ] }, methods:{ } }) </script> </body> </html>
v-model 双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>--按钮双向绑定--</div> <div>{{input_value}}</div> <input type="text" v-model="input_value"> <!--双向数据绑定--> <div> <input type="button" value="changebutton" @click="changebutton"> </div> <div> <div>--单选框--</div> <input type="radio" value="1" name="hh" v-model="sex">男 <input type="radio" value="2" name="hh" v-model="sex">女 <div>您选择了{{sex}}</div> <div>--多选框--</div> <input type="checkbox" value="hello" v-model="a">你好 <input type="checkbox" value="world" v-model="a">世界 <div> 您选择了{{a}} </div> <div>--select下拉列表--</div> <select v-model="aa"> <option disable value="">请选择</option> <option value="上海">上海</option> <option value="北京">北京</option> <option value="广州">广州</option> </select> <div>{{aa}}</div> <div>---下拉列表加for循环--</div> <select v-model="option_value"> <option disable value="">请选择</option> <option v-for="option in options" :value="option.b">{{option.b}}</option> </select> <div>您选择了{{option_value}}</div> </div> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ input_value :'default', sex:'1', a:[], aa:'', options:[{'a':11,'b':22,'c':33},{'a':111,'b':222,'c':333},{'a':1111,'b':2222,'c':3333},{'a':11111,'b':22222,'c':33333}], option_value :'' }, methods:{ changebutton:function(){ this.input_value = 'value is change' } } }) </script> </body> </html>
