目录1 vue简介1 1基本语法1 2vue js的M-V-VM思想1 3 显示数据2 常用指令2 1 属性操作2 2 事件绑定2 3 样式操作2 3 1
目录
1.vue简介
vue是一套后见用户界面的渐进式框架，只关注视图层，采用自低而上增量来发的设计，目的就是通过尽可能简单的api实现想用的数据绑定和组合的视图组件
1.1基本语法
<script src="js/vue.js"></script>
.....
<div id="app">{{message}}</div>
.....
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello world!',
}
});
</script>
-
vue.js的代码开始于一个vue对象，每次操作数据都要的声明vue对象开始
-
data是将要展示到HTML标签元素中的数据
-
el: '#app', 设置当前vue对象要控制的标签范围。
1.2vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
在浏览器红可以在console通过vm对象可以直接访问el和data属性，甚至可以访问data里面的属性
console.log(vm.$el) # #app vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.$data.message); # 访问data里面的数据
console.log(vm.message); # 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
1.3 显示数据
- 在双标签中显示纯文本数据一般是
{{}}来完成数据的显示，括号中还可以支持js表达式和js代码 - 在表单输入框中显示数据需要用·
v-model来完成数据的显示 - 如果双标签的内容要显示数据包含
html代码，用v-html来完成
....................
<script src="js/vue.min.js"></script>
...................
<p>{{ str1 }}</p> // 1. 纯文本显示
<p>{{ str1.split("").reverse().join("") }}</p>
<p>num和num2中比较大的数是：{{ num>num2? num:num2 }}</p> //2.表达式
<input type="text" v-model="name"> // 3. 表单输入框显示
<p>{{(price+0.8).toFixed(2)}}</p>
<script>
var vm = new Vue({
el: "#app",
data: {
str1: "hello",
num: 20,
price: 7.1,
url1: "http://www.baidu.com",
url2: "http://www.taobao.com"
}
})
</script>
双花括号引用来输出文本的内容，如果需要输出html代码，要用v-html来输出，v-html必须在html标签作为属性写出来
<span v-html="img"></span>
data:{
img:'<img src="upup.gif">',
}
在输入内容到普通标签的使用{{}}
v-model ,v-html等属性都支持js代码
<p>{{url}}</p>
<div>{{text}}</div>
<div v-html="text"></div>
<input v-model="url">
<div>num是{{num%2==0?'偶数':'奇数'}}</div>
<div>num的下一个数字：{{num-0+1}}</div>
<input type="text" v-model="num">
<div>{{message.split("").reverse().join("")}}</div>
<input type="text" v-model="message">
data:{ // vue要操作的数据
url:"http://www.luffycity.com",
text:"<h1>大标题</h1>",
num: 100,
message:"abcdef",
},
2. 常用指令
vue1.x写法 vue2.x的写法
v-html ----> v-html
{{ 普通文本 }} {{普通文本}}
v-bind:属性名 ----> :属性
v-on:事件名 ----> @事件名
2.1 属性操作
<标签名 :标签属性="data属性"></标签名>
案例显示密码
<div id="box">
密码：<input :type="type" v-model="password">
<button @click="change">{{text}}</button>
</div>
var vm = new Vue(
{
el:'#box',
data:{
url:'http://www.baidu.com',
type:'password',
password:'',
text:'显示密码'
},
methods:{
change(){
//change：function的简写
if (this.type==='text'){
this.type='password'
this.text='隐藏密码'
}
else {
this.type='text'
this.text='显示密码'
}
}
}
}
);
2.2 事件绑定
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
@blur ---> onblur
@click ---> onclick
....
案例：完成购物商城商品增加减少
<div id="box">
<button :disabled="disabled" @click="sub">-</button>
<input type="text" v-model="num">
<button @click="num++">+</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
num:0,
disabled:false
},
methods:{
sub(){
if(this.num-- <1){
this.num=0;
disabled:true
}
else {
this.disabled=false
}
}
}
});
</script>
2.3 样式操作
2.3.1 控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组
<!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="box">
<!--- 添加class类名，值是一个对象
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
-->
<p :class="{box1:myclass1}">一个段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一个段落</p>
</div>
<script>
let vm1=new Vue({
el:"#box",
data:{
myclass1:false, // 布尔值变量如果是false，则不会添加对象的属性名作为样式
myclass2:true, // 布尔值变量如果是true，则不会添加对象的属性名作为样式
myclass3:false,
},
})
</script>
<!-- 上面的代码可以:class的值保存到data里面的一个变量，然后使用该变量作为:class的值 -->
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app">
<button @click="mycls.box4=!mycls.box4">改变背景</button>
<button @click="mycls.box5=!mycls.box5">改变字体颜色</button>
<p :class="mycls">第二个段落</p>
</div>
<script>
let vm2 = new Vue({
el:"#app",
data:{
mycls:{
box4:false,
box5:true
},
}
})
</script>
<!-- 批量给元素增加多个class样式类 -->
<style>
.box6{
background-color: red;
}
.box7{
color: green;
}
.box8{
border: 1px solid yellow;
}
</style>
<div id="app2">
<p :class="[mycls1,mycls2]">第三个段落</p>
</div>
<script>
let vm3 = new Vue({
el:"#app2",
data:{
mycls1:{
box6:true,
box7:true,
},
mycls2:{
box8:true,
}
}
})
</script>
</body>
</html>
总结
1. 给元素绑定class类名，最常用的就是第二种。
vue对象的data数据：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}
html元素：
<div class="box" :class="myObj">2222</div>
最终浏览器效果：
<div class="box complete">2222</div>
2.3.2 控制标签style样式
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data数据如下：
data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是对象变量名，对象在data中进行声明
标签元素：
<div v-bind:style="styleObject"></div>
data数据如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是数组
标签元素：
<div v-bind:style="[style1, style2]"></div>
data数据如下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
案例：选项卡
样式：<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>
html代码
<div id="card">
<div class="title">
<span @click="num=0" :class="num==0?'current':''">国内新闻</span>
<span @click="num=1" :class="num==1?'current':''">国际新闻</span>
<span @click="num=2" :class="num==2?'current':''">银河新闻</span>
<!--<span>{{num}}</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>
js代码
var card = new Vue({
el:"#card",
data:{
num:0,
},
});
2.4 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
2.4.1 v-if
标签元素：
<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.4.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数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.4.3 v-else-if
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>
data数据：
data:{
num:2
}
2.4.4 v-show
用法和v-if大致一样，区别在于2点：
- v-show后面不能v-else或者v-else-if
- v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.4.5列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<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>
</html>
3. vue对像提供的属性功能
3.1 过滤器
全局过滤器
<p>{{price|formate}}</p>
Vue.filter("formate",function (money) { // formate是过滤器函数名
return money.toFixed(2) + "元";
});
var vm=new Vue({
el:'#app',
data:{
price:10/3,
},
})
局部过滤器
var vm=new Vue({// 局部只能在当前的vm对象使用
el:'#app',
data:{
price:10/3,
},
filters:{
formate(money){
return money.toFixed(3) +"元";
}
}
})
3.2计算和侦听属性
3.2.1 计算属性
<div id="app">
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=<span>{{total}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
},
computed:{//计算属性，相当于创建一个新的变量保存数据计算的结果
total(){
return parseFloat(this.num1) + parseFloat(this.num2);
}
}
})
3.2.2 监听属性
<div id="app">
<button @click="num++">赞{{num}}</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
watch: {
num(v1, v2) {
if (this.num >= 5) {
this.num = 5;
console.log(this.num,'修改后 num='+v1,'修改前num='+v2);
}
}
})
</script>
watch是监听事件num里面记录的是修改前后的值记录
3.5 vue对象的生命周期
3.6 阻止事件冒泡和页面刷新
阻止事件冒泡
事件冒泡：指代js中的子元素的事件点击触发以后，会导致父级元素同类一并发生触发到，事件的冒泡有好处也有坏处
好处： 可以利用事件冒泡来实现事件委托，提高性能
坏处： 不能正确使用会出现bug出现
<body @click="show('点击了body')">
<div id="app" class="c1" @click="show('点击了c1')">
<div class="c2" @click.stop="show('点击了c2')">
</div>
</div>
var vm = new Vue({
el: '#app',
methods: {
show(message) {
alert(message);
}
}
})
阻止事件冒泡只需要在@click后加stop @click.stop
页面刷新
在我们做一个a标签，指向百度的地址，当我们点击的时候回跳转到百度的页面
<div id="app">
<a href="http://www.baidu.com" @click.prevent="show">百度</a>
</div>
var vm = new Vue({
el: '#app',
methods: {
show() {
}
}
})
页面刷新，只要添加@click.prevent就可以不跳转到百度页面
