vue 基础
Posted knighterrant
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 基础相关的知识，希望对你有一定的参考价值。
一 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
1.Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
2.View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
3.ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，
负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
二.大致的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ // 创建vm对象 var vm = new Vue({ el: "#app", data: { name:"大标题", age:16, }, }) } </script> </head> <body> <div id="app"> <!-- 在双标签中显示数据要通过{{ }}来完成 --> <h1>{{name}}</h1> <p>{{age}}</p> <!-- 在表单输入框中显示数据要使用v-model来完成 --> <input type="text" v-model="name"> </div> </body> </html>
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}
2. 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值
则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
3. 双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.
v-html必须在html标签里面作为属性写出来.
<span v-html="img"></span> <script> let vm = new Vue({ el:".app", data:{ img:‘<img src="images/shendan.png">‘, } }) </script>
4.在输出内容到普通标签的使用{{ }}还支持js代码。
<h1>{{str1.split("").reverse().join("")}}</h1>
5. 支持js的运算符
<h1>{{num1+3}}</h1>
6.三元运算符,类似于python里面的三元表达式
三元运算符的语法:
判断条件 ? 条件为true : 条件为false的结果
<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>
python 三元表达式[三目运算符]的语法:
a if 条件 else b
7 .图片标签
<span v-html="img"></span> <img :src="img2" alt="" width="200px"> <!-- 冒号：表示 设置属性 --> data:{ // data 相当于 model img:‘<img src="img/1.png" width="100px">‘ ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性 img2:‘img/1.png‘ , //用设置属性的方法 :src=‘img2‘ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <span v-html="img"></span> <img :src="img2" alt="" width="200px"> <!-- 冒号：表示 设置属性 --> <img v-bind:src="img2" width="50"> <!--1.0版本用 v-bind： 设置属性--> </div> <script> // 页面加载完执行 window.onload=function (ev) { let vm = new Vue({ // 至少两个数据el 和data el:‘#app‘, //通过css 选择器 确定vue要控制的范围 data:{ // data 相当于 model img:‘<img src="img/1.png" width="100px">‘ ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性 img2:‘img/1.png‘ , //用设置属性的方法 :src=‘img2‘ } }) } </script> </body> </html>
常用指令
1.指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
vue1.x写法 ------> vue2.x的写法
v-html ------> {{ }}
v-bind:属性名 ----> :属性 表示： 设置属性
v-on:事件名 ----> @事件名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <span v-html="img"></span> <p v-html="{{title}}"></p> <img v-bind:src="img2" width="50"> <!--1.0版本用 v-bind： 设置属性--> <button v-on:click="func">点击</button> <!-- 点击事件 --> <button @click="(num<10)?(num):(num-10)">点击{{num}}</button> <!-- 点击事件 使用了三元运算符 --> </div> <script> // 页面加载完执行 window.onload=function (ev) { let vm = new Vue({ // 至少两个数据el 和data el:‘#app‘, //通过css 选择器 确定vue要控制的范围 data:{ // data 相当于 model img:‘<img src="img/1.png" width="100px">‘ ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性 title:"hello world", num:10 }, methods:{ func:function () { alert("你点我干嘛！"); } } }) } </script> </body> </html>
2. 操作属性
格式：
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 <a :href="url2">淘宝</a> <a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
3.事件绑定
有两种写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
案例1 ：
知识点：
1. v-model input 框
2. @click 点击事件
3. 三元运算符
核心代码：
<button @click="num+=1">添加商品</button> <input type="text" v-model="num"> <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <script> // 页面加载完执行 window.onload=function (ev) { let vm = new Vue({ // 至少两个数据el 和data el:‘#app‘, //通过css 选择器 确定vue要控制的范围 data:{ // data 相当于 model num:10 } }) } </script> <div id="app"> <button @click="num+=1">添加商品</button> <input type="text" v-model="num"> <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 --> </div> </body> </html>
4 操作样式
1.控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组
添加class类名，值是一个对象
<style>
.box1{color: red;border: 1px solid #000;}
.box2{background-color: orange;font-size: 32px;}
</style>
<!---直接给标签设置class属性时，用的是 单花括号 --> <p :class="{box1:mycls1}">段落一</p> <p @click="mycls3=!mycls3" :class="{box2:mycls3,box1:mycls2,}">段落一</p> data:{ // data 相当于 model mycls1:false, // class属性设置是 bool mycls2:true, mycls3:true }
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
2. 一个属性间的来回切换
<style> .box4{ background-color: red; } .box5{ color: green; } </style> <div id="app2"> <!---通过点击事件来回的切换样式 -> <!---给某个标签来回切换样式 点击事件，对样式进行取反 ，再给某个标签设置该样式就可以来回切换该样式 --> <button @click="mycls.box5=!mycls.box5">改变背景</button> <button @click="mycls.box4=!mycls.box4">改变字体颜色</button> <!--mycls3=!mycls3 表示取反 ，用于来回在该属性之间进行切换--> <p :class="mycls">你好啊</p> </div> <script> let vm2=new Vue({ el:"#app2", data:{ mycls:{ box4:false, box5:true } } }) </script>
3. 批量给元素增加多个class样式类
<style> .box4{ background-color: red; } .box5{ color: green; } </style> <!-- 批量给元素增加多个class样式类 --> <style> .box6{background-color: red;} .box7{color: green;} .box8{border: 1px solid yellow;} </style> <div id="app3"> <p :class="[mycls1,mycls2]">第3段落</p> </div> <script> let vm3=new Vue({ el:"#app3", data:{ mycls1:{ box6:false, box7:true }, mycls2:{ box8:true } } }) </script>
2 控制标签style样式
格式1：值是json对象，对象写在元素的:style属性中
<div :style="{color: activeColor, fontSize: fontSize + ‘px‘ }"></div> data: { activeColor: ‘red‘, fontSize: 30 }
格式2：值是对象变量名，对象在data中进行声明
<div v-bind:style="styleObject"></div> data: { styleObject: { color: ‘red‘, fontSize: ‘13px‘ } }
格式3：值是数组
<div v-bind:style="[style1, style2]"></div> data: { style1:{ color:"red" }, style2:{ background:"yellow", fontSize: "21px" } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .box1{color: red;border: 1px solid #000;} .box2{background-color: orange;font-size: 32px;} </style> </head> <body> <!--方式一--> <div id="box1"> <p :style="{color:mycolor,backgroundColor:mybg}">第一段内容</p> </div> <br> <script> var vm1= new Vue({ el:"#box1", data:{ mycolor:‘red‘, mybg:‘pink‘ } }) </script> <!--方式二--> <div id="box2"> <p :style="mystyle">第一段内容</p> </div> <br> <script> var vm2= new Vue({ el:"#box2", data:{ mystyle:{ color:"red", backgroundColor:"pink" } } }) </script> <!--方式三：--> <div id="box3"> <div :style="[mystyle,mystyle2]">第一段内容</div> </div> <br> <script> var vm3= new Vue({ el:"#box3", data:{ mystyle:{ color:"red", backgroundColor:"pink" }, mystyle2:{ height:"400px", width:"400px" } } }) </script>
3 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
1. v-if
<!-- vue对象最终会把条件的结果变成布尔值 --> <h1 v-if="ok">Yes</h1> data:{ ok:false // true则是显示，false是该标签不会出现，不只是隐藏 }
2 v-else
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> data:{ ok:false // true则是显示，false是隐藏 }
3 v-else-if
<h1 v-if="num==1">num的值为1</h1> <h1 v-else-if="num==2">num的值为2</h1> <h1 v-else>num的值是{{num}}</h1> data:{ num:2 }
4 v-show
用法和v-if大致一样，区别在于2点：
1. v-show后面不能v-else
2. v-show隐藏元素时，使用的是display:none来隐藏的，
而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
<h1 v-show="ok">Hello!</h1> data数据： data:{ ok:false // true则是显示，false是隐藏
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="box"> <p v-if="is_login">欢迎再次登录我们网站</p> <p v-else><a href="">注册</a><a href="">登录</a></p> <p v-if="num%3==0">这个数能被3整除</p> <p v-else-if="num%5==0">这个数能被5整除</p> <p v-else-if="num==1">这个数为{{num}}</p> <p v-else>你好</p> <!--v-show 符合条件就展示 ，不符合条件就隐藏 --> <p v-show="num==3">这个数为3</p> <p v-show="num">这个数为3</p> </div> </body> <script> var vm =new Vue({ el:‘#box‘, data:{ // is_login:true, is_login:false, num:3 } }) </script> </html>
5 列表渲染指令
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组：
<ul> <!--i是列表的每一个元素--> <li v-for="i in list">{{i}}</li> </ul>
数据是对象：
<ul> <!--i是每一个value值,j是每一个键名--> <li v-for="(i, j) in obj1">{{j}}:{{i}}</li> </ul>
实用案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <script> // 页面加载完执行 window.onload=function (ev) { let vm = new Vue({ // 至少两个数据el 和data el:‘#app‘, //通过css 选择器 确定vue要控制的范围 data:{ // data 相当于 model num:10 } }) } </script> <div id="app"> <button @click="num+=1">添加商品</button> <input type="text" v-model="num"> <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 --> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> span{ height: 100px; width: 100px; background: grey; display: inline-block; line-height: 100px; text-align: center; } .new div{ width: 320px; height: 300px; background: red; display: none; } .new .active{ display: block; } .current{ background: red; } </style> </head> <body> <div id="box"> <div class=‘item‘> <span :class="num==1?‘current‘:‘‘" @click="num=1">国内新闻</span> <span :class="num==2?‘current‘:‘‘" @click="num=2">国外新闻</span> <span :class="num==3?‘current‘:‘‘" @click="num=3">银河新闻</span> </div> <div class="new" > <div :class="num==1?‘active‘:‘‘">国内新闻</div> <div :class="num==2?‘active‘:‘‘">国外新闻</div> <div :class="num==3?‘active‘:‘‘">银河新闻</div> </div> </div> </body> <script> var vm =new Vue({ el:‘#box‘, data:{ num:1 } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> </head> <style> .active { color: red } #good_add, #good_edit { width: 300px; height: 300px; border: 1px solid grey; background: grey; text-align: center; /*display: none;*/ } .proform{ display: block; } .hide_cls{ display: none; } #good_edit div ,#good_add div{ margin-top: 20px; } </style> <body> <div id="box"> <div class="row"> <div class="col col-md-3"> <div id="good_add" :class="{‘proform‘:add_cls1,‘hide_cls‘:add_cls2}"> <h3>添加商品</h3> <div>商品标题 <input type="text" v-model="add_name"></div> <div>商品数量 <input type="text" v-model="add_num"></div> <div>商品价格 <input type="text" v-model="add_price"></div> <div><button class="btn btn-default" @click="add_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default " @click="add_cancel" style="margin-left: 20px">取消</button></div> </div> </div> <div class="col col-md-6 "> <button class="btn btn-info" @click="add">添加</button> <table class="table table-bordered"> <tr> <th>编号</th> <th>书名</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> <tbody> <tr v-for="good,key in goods"> <td>{{key+1}}</td> <td>{{good.name}}</td> <td v-if="good.price>100" :class="{active:mycls}">{{good.price}}</td> <td v-if="good.price<=100">{{good.price}}</td> <td>{{good.num}}</td> <td> <button class="btn btn-info" @click="edit(key)">编辑</button> <button class="btn btn-danger" @click="goods.splice(key,1)">删除</button> </td> </tr> </tbody> </table> </div> <div class="col col-md-3 pull-right"> <div id="good_edit" :class="{‘proform‘:edit_cls1,‘hide_cls‘:edit_cls2}" > <!--<div>编号<input type="text" v-model="k"></div>--> <h3>编辑商品</h3> <div>商品标题 <input type="text" v-model="name"></div> <div>商品数量 <input type="text" v-model="num"></div> <div>商品价格 <input type="text" v-model="price"></div> <div><button class="btn btn-default" @click="edit_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default" @click="edit_cancel" style="margin-left: 20px">取消</button></div> </div> </div> </div> </div> <script> let l = new Vue({ el: "#box", data: { goods: [ {‘name‘: "python1", ‘price‘: 150,"num":1000}, {‘name‘: "python2", ‘price‘: 100,"num":2000}, {‘name‘: "python3", ‘price‘: 70,"num":3000}, {‘name‘: "python4", ‘price‘: 60,"num":4000}, {‘name‘: "python5", ‘price‘: 110,"num":5000} ], //编辑所用的值 k:"",// 记录该书的索引值，方便编辑后保存用 name:"", //点击编辑时，把该书的开始name显示 ，之后修改后同步改变，下面的价格和数量也是一样 price:"", num:"", edit_init_dic:"",// 点击编辑时，记录最初 的书籍信息 // edit_init_k:"",//点击编辑时，记录该书最初索引值 可以不用 edit_cls1: false, edit_cls2: true, //添加用的参数 add_name:"", add_price:"", add_num:"", add_cls1:false, add_cls2:true, mycls:true }, methods:{ edit:function (key) { //显示编辑框 this.edit_cls1=true; this.edit_cls2=false; //数据处理 this.k=key; this.name=this.goods[key].name; this.price=this.goods[key].price; this.num=this.goods[key].num; this.edit_init_dic={"name":this.goods[key].name,"price":this.goods[key].price,"num":this.goods[key].num}; this.edit_init_k=key }, edit_keep:function () { this.goods.splice(this.k,1,{"name":this.name,"price":this.price,‘num‘:this.num}) this.edit_cls1=false; this.edit_cls2=true; }, edit_cancel:function () { this.goods.splice(this.k,1,this.edit_init_dic); this.edit_cls1=false; this.edit_cls2=true; }, add:function () { //点击添加按钮弹出 添加框 //:class="{‘proform‘:add_cls1,‘hide_cls‘:add_cls2} this.add_cls1=true; this.add_cls2=false; //将上次的数据清空显示 this.add_name=""; this.add_price=""; this.add_num=""; }, add_keep:function () { //保存数据 this.goods.splice(this.goods.length,1,{‘name‘:this.add_name,‘price‘:this.add_price,‘num‘:this.add_num}); //隐藏 添加框 this.add_cls1=false; this.add_cls2=true; }, add_cancel:function () { //把数据清空 this.add_name=""; this.add_price=""; this.add_num=""; //隐藏 添加框 this.add_cls1=false; this.add_cls2=true; } } }) </script> </body> </html>