1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 message:"欢迎学习Vue" } }) </script> </body> </html>
{{}}
{{5+5}}
{{message.split(‘‘).reverse().join(‘‘)}}
指令：带有V-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <p>{{5+5+2}}</p> <p>{{message.split(‘‘).reverse().join(‘‘)}}</p> <p><a v-bind:href="url">百度一下试试看</a> </p> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 message:"欢迎学习Vue", url:‘http://www.baidu.com‘ }, methods:{ //自定义方法 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="Math.random()>0.5">大于0.5</div> <div v-else>小于0.5</div> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 }, methods:{ //自定义方法 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{phone}}</p> 手机号<input v-model="phone"/> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 phone:"0000" }, methods:{ //自定义方法 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ol> <li v-for="user in users">{{user.name}}</li> </ol> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 users:[ {name:"Anna小姐姐"}, {name:"老王"}, {name:"小陈"} ] }, methods:{ //自定义方法 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{title}}</p> <button v-on:click="changeTitle">完善标题</button> </div> <script> new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 title:"面试专题课程" }, methods:{ //自定义方法 changeTitle:function(){ this.title=" || yb课堂 2020年 "+this.title; } } }) </script> </body> </html>
常见v-bind和v-on缩写
v-bind缩写
<!-- 完整语法 --> <a v-bind:href="url" > 点我一下 </a> <!--缩写 --> <a :href="url" > 点我一下 </a>
v-on缩写
<!-- 完整语法 --> <a v-on:cliick="changeTitle">点我一下</a> <!-- 缩写 --> <a @cliick="changeTitle">点我一下</a>
参数：在指令后以冒号指令，例如v-bind指令被用来响应地更新HTML属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <yb_component></yb_component> </div> <script> Vue.component(‘yb_component‘,{ //定义组件 data:function(){ //组件的数据源 return { count:0 } }, template:‘<button @click="count++"> 点击{{count}}次 </button>‘ //定义一个模版 }) new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 }, methods:{ //自定义方法 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yb课堂快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <yb_component message="yb课堂 欢迎学习Vue "></yb_component> </div> <script> Vue.component(‘yb_component‘,{ //定义组件 props: { message:{ type:String } }, data:function(){ return { count:0 } }, template:‘<button @click="count++">{{message}} 点击{{count}}次 </button>‘ //定义一个模版,组件里的template只能包含一个根节点 }) new Vue({ el:‘#app‘, //绑定到那个元素 data:{ //数据源 }, methods:{ //自定义方法 } }) </script> </body> </html>
yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》
原文：https://www.cnblogs.com/chenyanbin/p/13337862.html