vue基础语法
介绍：Vue是一套用于构建用户界面的渐进式框架
Vue核心库只关注视图层，不仅容易上手，还便于与第三方既有项目整合
vue官网
Hello World
1.引入vue.js
2.创建一个带有id的dom
3.编写vue实例，el挂载点对应HTMLdom，data表示vue实例中的数据
1 <div id="app"> 2 {{hello}} 3 </div> 4 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <script> 7 var app= new Vue({ 8 el:"#app", 9 data:{ 10 hello:"Hello world" 11 } 12 }) 13 </script>
指令
1. v-text
更新元素的 textContent（标签内文字）。
v-text=””可以与{{}}替换使用
1、v-text没有vue因网速过慢导致加载的问题
2、{{}}前后可以加值，而v-text会覆盖元素中原来的内容
3、{{}}和v-text不能识别html语言,需要使用html
代码
1 <body> 2 <div id="app"> 3 <h2 v-text="msg"></h2> 4 <p >{{msg}}</p> 5 6 </div> 7 <script> 8 var vm = new Vue({ 9 el: '#app', 10 data:{ 11 msg:'养老院智能服务系统' 12 } 13 }) 14 </script> 15 </body>
2.v-html
更新元素的 innerHTML (html标签会被编译)
代码展示
1 <body> 2 <div id="app"> 3 <h2 v-html="msg"></h2> 4 <p >{{msg}}</p> 5 6 </div> 7 <script> 8 var vm = new Vue({ 9 el: '#app', 10 data:{ 11 msg:'<h2 style="color: maroon">养老院智能服务系统</h2>' 12 } 13 }) 14 </script> 15 </body>
3.v-show
根据表达式bool值，切换元素的 display 属性。
1 <div id="app"> 2 <div v-show="ok" v-html="hello"></div> 3 <div v-show="no" v-html="hello"></div> 4 </div> 5 <script> 6 var app = new Vue({ 7 el:"#app", 8 data:{ 9 ok:true, 10 no:false, 11 hello:"<h1>Hello Vue</h1>" 12 } 13 }) 14 </script>
4.v-if、v-else、v-else-if
多个元素 通过条件判断展示或者隐藏某个元素
1 <div id="app"> 2 <input v-model="score"> 3 <div v-if="score>=90">优秀</div> 4 <div v-else-if="score>=80&&score<90">良好</div> 5 <div v-else-if="score>=70&&score<80">一般</div> 6 <div v-else>较差</div> 7 </div> 8 <script> 9 var app = new Vue({ 10 el:"#app", 11 data:{ 12 score:100, 13 } 14 }) 15 </script>
v-show 和 v-if的区别
- v-show本质就是标签display设置为none，控制隐藏（适用于频繁切换显示）
- v-if是动态的向DOM树内添加或者删除DOM元素
v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
1 <div id="app"> 2 <ul> 3 // item为当前遍历元素 index为下标 4 <li v-for="item in fruits">{{item}}</li> 5 <li v-for="(item,index) in fruits">{{index}}-----{{item}}</li> 6 <li v-for="item in myFruits">{{item.cname}}----{{item.ename}}</li> 7 <li v-for="(item,index) in fruits" :key="index">{{item}}</li> 8 </ul> 9 </div> 10 <script> 11 var vue = new Vue({ 12 el:"#app", 13 data:{ 14 fruits:['apple','orange','aaa'], 15 myFruits:[{ 16 cname:"苹果", 17 ename:"apple" 18 },{ 19 cname:"橙子", 20 ename:"orange" 21 },{ 22 cname:"AAA", 23 ename:"aaa" 24 }] 25 } 26 }) 27 </script>
key 的作用：使得vue提高性能
v-for与v-if一同使用
不推荐在同一元素上使用 v-if 和 v-for
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。性能不好
如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>5.v-on:绑定事件
常用事件：click/mouseover/mouseup/
1 <body> 2 <div id="app"> 3 <h2 v-html="msg"></h2> 4 <input type="button" value="点击报名" id="submit" v-on:click="result"> 5 6 </div> 7 <script> 8 var vm = new Vue({ 9 el: '#app', 10 data:{ 11 msg:'<h2 style="color: maroon">养老院智能服务系统</h2>' 12 }, 13 methods:{ 14 result:function(){ 15 alert('报名成功') 16 } 17 } 18 19 }) 20 </script> 21 </body>
6.v-model 双向数据绑定
当文本输入框的内容发生变化时 会同步修改绑定的数据
如果直接修改data里面的值 也会同步修改文本输入框里面的文本
注意：只有指定的表单元素可以使用(input select textarea)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <!--<input type="text" v-model="message">--> 11 <!--<input type="text" :value="message" @input="valueChange">--> 12 <input type="text" :value="message" @input="message = $event.target.value"> 13 <h2>{{message}}</h2> 14 15 <!-- 简单双向绑定 -->
16 <input type="text" v-model = 'm'>{{m}} 17 </div> 18 19 <script src="../js/vue.js"></script> 20 <!-- v-model 实现表单和数据的双向绑定 --> 21 <script> 22 const app = new Vue({ 23 el: '#app', 24 data: { 25 message: '你好啊' 26 }, 27 methods: { 28 valueChange(event) { 29 this.message = event.target.value; 30 } 31 } 32 }) 33 </script> 34 <!-- <script> 35 // 双向绑定 36 const app = new Vue({ 37 el: '#app', 38 data : { 39 m: 'hi' 40 } 41 }); 42 </script> --> 43 </body> 44 </html>
修饰符
<--.trim：去掉开始和结尾的空格 -->
<input type="text" v-model.trim="num2">