yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》
Vue模版语法开发起步
- 基于HTML的模版语法，允许声明式地将DOM绑定至底层Vue实例的数据
- 用简洁的模版语法来声明式的将数据渲染进DOM的系统
- 结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件并应用到DOM操作上
简单入门
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>
{{}}
- 文本插值
- 里面JavaScript表达式
{{5+5}}
{{message.split('').reverse().join('')}}
Vue指定和参数
讲解什么是Vue指令
指令：带有V-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM
- 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"> <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>
- v-if v-else 指令
- 逻辑判断
<!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>
- v-model 指令
- 实现双向数据绑定
- 一般在input、select、textarea、checckbox、radio等表单上使用
<!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>
- v-for 循环指令
<!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>
- v-on 指令
- 监听时间，并对用户的输入进行响应
<!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属性
Vue里面的组件（多次复用）
- vue的组件
- 扩展HTML元素，封装可重用的代码（就是通用的模块）
- 注册组件
- Vue.component(组件名，选项)
- 组件可以拷贝多次，复用多次
- 每个组件都会各自独立维护它的数据
- data必须是一个函数，而不是前面讲的json对象
- 每个实例可以维护一份被返回对象的独立的拷贝，否则数据就会共享出现问题
<!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>
通过prop向子组件传值
<!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>
