一、Vue的基础使用
先导入vue.js文件，建立vue的对象，并设定选择符，以及数据，通过实例化找到选择符，使用key调用value，之后展示key。
注意事项：
1.一个html页面可以拥有多个vue对象，但是一个vue对象的变量名只能有一个，一个vue对象负责一个功能.
2.js中所有的语法都区分大小写
3.实例化vue对象的代码最好写在body的最下面
<script src="vue.js"></script> <script> window.onload = function(){ 页面加载完毕后直接调用
var vm = new Vue({ 建立vue对象，对vm进行实例化
el: "#app", vue要操作的选择符
data: {
message: "hello world",
},
});
}
</script>
</head>
<body>
<div id="app"> 在el属性对象的标签中，填写正确的vue语法展现或者控制数据
{{message}} 调用并且展示 </div> {{message}} </body>
二、Vue的框架思想MVVM
通过建立模板视图，可以在前端建立一个输入口直接实例化对象，并且可以更改，使用v-model=“ ”，不管输入什么，视图模板的就会显示什么
new vue 负责视图模板中的数据随时要和打他里面的数据保持一致随时
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 1. 先引入vue核心文件 --> <script src="vue.js"></script> </head> <body> <!-- V，View，视图模板 --> <div id="app"> <input v-model="message"><br> {{message}} </div> <script> // new Vue，VM对象，负责时刻保证视图模板中的数据和data里面的数据一致！ var vm = new Vue({ el:"#app", data:{ // M，Model，模型里面的所有数据，将来都会作为vm对象的属性存在 message: "一篇文章", num: 16, } }) </script>
三、显示数据的三种方法
1.使用标签内容直接调用数据
2.使用标签里面套标签，二层标签的标签内容调用数据
3.标签的属性调用数据
<div id="box"> <h1>{{message.toUpperCase()}}</h1> <p>一共有<span>{{num+100}}</span>个同学在上课!</p> <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> <div v-html="htmlcode"></div> </div> <script> var vm = new Vue({ el:"#box", data:{ message:"hello world", num:16, htmlcode: "<h1>大标题</h1>" } }); </script> </body>
四、属性操作
v-bind：可以和相同属性共存在同一行
v-model：实现标签数据的双向绑定，既可以接收数据，也可以传递数据
在输入框中选择是否需要隐藏密码，使用按键改变
通过input接收数据，将按键设定成函数，使用@click =“”，
通过函数执行的返回结果，判断来改变按键的信息
<body> <div id="box"> <a :href="url">百度</a> <a v-bind:href="url">百度</a><br> 密码：<input :type="type" v-model="password"><button @click="change">{{text}}</button> <br> </div> <script> // data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法 var vm = new Vue({ el:"#box", data:{ url: "http://www.baidu.com", type: "password", password:"", text:"显示密码", }, methods:{ change(){ // change: function(){ 的简写 if(this.type=="password"){ this.type="text"; // 这里的this表示vm对象 this.text="隐藏密码"; }else{ this.type="password"; this.text="显示密码"; } } } }); </script> </body>
五、事件操作
通过按键的加减来改变文本框中的数值
建立一个加号和减号的按键，以及一个文本框
建立函数methods（）：方法，当点击加号时，触发add函数，使数值加一，当点击减号时，触发sub函数，使数值减一，if至小于0时，值为0
<body> <div id="box"> <button :disabled="goods.disabled" @click="sub">-</button> <input type="text" v-model="goods.num"> <button @click="add">+</button> </div> <script> // data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法 // js中，a-=1 和 a-- 是一样的效果，--就是-=1的缩写 var vm = new Vue({ el:"#box", data:{ goods:{ num: 0, disabled: false, } }, methods:{ sub(){ // 减少商品数量 if( this.goods.num-- <= 1 ){ this.goods.num=0; this.goods.disabled=true; }else{ this.goods.disabled=false; } }, add(){ this.goods.num++; this.goods.disabled=false; } } }); </script> </body>
六、样式操作
6.1、class样式
建立文本框并对其设置样式
先设置样式：颜色以及字体大小
在标签属性中使用class直接赋值给样式
或者使用class间接设置函数名，通过函数中的样式赋值给标签，由上到下一次进行，后执行的会覆盖先执行的
<style> .box1{ color: red; border: 1px solid #000; } .box2{ background-color: orange; font-size: 32px; } </style> </head> <body> <div id="box"> <div :class="cls1">值是字符串</div> <div :class="{box1:false,box2:true}">值是对象</div> <div :class="cls2">值是对象名</div> <div :class="[cls1,cls3]">值是数组</div> <div :class="cls4?'box1':''">三元表达式</div> </div> <script> var vm = new Vue({ el:"#box", data:{ cls1: "box1", cls2:{ box1:true, box2:false }, cls3:"box2", cls4:true, }, methods:{ } }); </script> </body>
6.2、style样式
style可以直接设置样式，或 者使用函数名的形式设置样式
<body> <div id="box"> <div style="color: red;background-color: orange;">普通css样式写法</div> <div :style="{color:fc, backgroundColor:gc}">vue修改行内样式，值是对象</div> <div :style="sty1">vue修改行内样式，值是对象名</div> <div :style="[sty1,sty2]">vue修改行内样式，值是数组</div> </div> <script> var vm = new Vue({ el:"#box", data:{ fc: "red", gc: "blue", sty1:{ color: "yellow", backgroundColor: "blue" }, sty2:{ fontSize: "32px", border:"1px solid #fff", } }, methods:{ } }); </script> </body>
七、选项卡
选项卡的制作，通过点击选项，展示该选项下的样式，隐藏其他的选项
<head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style> <script src="vue.js"></script> </head> <body> <div id="card"> <div class="title"> <span :class="num==0?'current':''" @click="num=0">国内新闻</span> <span :class="num==1?'current':''" @click="num=1">国际新闻</span> <span :class="num==2?'current':''" @click="num=2">银河新闻</span> </div> <div class="content"> <div class="list" :class="num==0?'active':''">国内新闻列表</div> <div class="list" :class="num==1?'active':''">国际新闻列表</div> <div class="list" :class="num==2?'active':''">银河新闻列表</div> </div> </div> <script> // 思路：利用标题栏每一个标题和内容对应的序号来记录和控制它们的显示和隐藏 var vm = new Vue({ el:"#card", data:{ num: 0, }, }) </script> </body>
八、条件渲染指令
8.1、条件渲染指令v-if
通过点击案件，判断时候需要显示样式，使用v-if进行判断
先设定好样式，通过监听按键的状态判断是都需要自行样式
<head> <style> .loginbox{ width: 200px; height: 120px; background-color: gray; } </style> </head> <body> <div id="app"> <button @click="is_show=!is_show">登录</button> <div v-if="is_show" class="loginbox"> 登录窗口 </div> </div> <script> var vm = new Vue({ el:"#app", data:{ is_show: false, } }) </script> </body>
8.2、条件渲染指令 v-else以及v-else-if
使用v-if进行判断，之后的判断使用v-else-if，最后使用v-else结尾，v-else-if可以使用多次。
body>
<div id="app">
<li v-if="num==1">星期一</li>
<li v-else-if="num==2">星期二</li>
<li v-else-if="num==3">星期三</li>
<li v-else-if="num==4">星期四</li>
<li v-else-if="num==5">星期五</li>
<li v-else-if="num==6">星期六</li>
<li v-else>星期天</li>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num: new Date().getDay(), // 登录状态
}
})
</script>
8.3、条件渲染指令v-show
v-show和v-if的区别
1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
<body> <div id="app"> <p v-show="is_show">一段文本</p> <p v-if="is_show">一段文本</p> </div> <script> var vm = new Vue({ el:"#app", data:{ is_show: true, } }) </script>
8.4、条件渲染指令 v-for
建立列表清单
先建立一个标题栏，使用v-for循环取值，并将取出来的值放入格子中
<body> <div id="app"> <table border="1" align="center" width="800"> <tr> <th>序号</th> <th>商品编号</th> <th>商品标题</th> <th>商品价格</th> <th>商品数量</th> </tr> <tr v-for="goods,index in goods_list"> <td>{{index+1}}</td> <td>{{goods.id}}</td> <td>{{goods.title}}</td> <td>{{goods.price}}</td> <td>{{goods.num}}</td> </tr> </table> </div> <script> var vm = new Vue({ el:"#app", data:{ goods_list: [ {id:10,title:"商品1",price:100,num:65}, {id:15,title:"商品2",price:120,num:65}, {id:16,title:"商品3",price:150,num:65}, {id:18,title:"商品4",price:200,num:65}, {id:20,title:"商品5",price:3060,num:65}, {id:21,title:"商品6",price:1000,num:65}, ], } }) </script> </body>