Vue简介：Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue官方下载地址：https://vuejs.org/v2/guide/installation.html
下载之后，我们只需要在需要用Vue的html页面引入vue.js即可
<script src="vue.js"></script>
1.基本语法：
1、声明数据选入dom系统；
2、js中定义相关作用域
说明：只有在id=app中的节点才能获取Vue的数据，需要在script里new一个Vue对象,el是控制区域的id名，data中放的的定义的数据，文本插值用“{{}}”包裹，{{}}内可以是一些简单的逻辑计算,v开头的是指令.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="vue.js" ></script>
</head>
<body>
<div id="app">
{{ message }}
<br>
{{ 3+1 }}
<!-- v-text -->
<div v-text="vtext"></div>
<!-- html可以解析标签-->
<div v-html="vhtml"></div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"我是测试数据",
vtext:"我是text文本",
vhtml:"<h1>我是html文本</h1>"
}
})
</script>
</html>
运行结果
显示message数据.png
1.1 表达式，文本插值：“{{}}”，表达式内可以用一些简单的逻辑
{{ message }}
{{ 3+1 }}
1.2 指令 ：指令以v作为开头；指令内部提供类js环境
(1) . v-text,v-html都是将数据显示
<div v-text="vtext"></div>
<div v-html="vhtml"></div>
(2) . 条件：v-if是否显示（如果is_show为false，该div就不显示）
<div v-if="is_show">显示了div</div>
<p v-if="num==1">num==1</p>
<p v-else-if="num==2">num==2</p>
<p v-else>num等于其他</p>
(3) . 循环：v-for循环（可以循环数组，也可以循环对象）v-for比v-if的优先级更高
1.通过关键字”in”来循环：v-for="(v,k) in mydata"
<!--索引是为了在操作数据后，定位找到数据-->
<li v-for="(v,k) in arr">
姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
</li>
2.通过关键字“of”来循环：
<li v-for="(v,k) of arr">
姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
</li>
<!--只有对象有第三个参数index,数组没有-->
<li v-for="(v,k,index) in obj">
键名是{{k}},键值是{{v}}索引是{{index}}
</li>
(4) . v-on来绑定事件(简写是用：“@”)：js里通过methods来定义事件（点击事件v-on:click）
通过this来获取到数据；
<button v-on:click="sub">vue点击{{message}}</button>
<script>
new Vue({
el:"#app",
data:{
message:"<h1>你好 hello word</h1>",
judge:false,
str:"没有值",
is_show:true,
num:2,
//不能检测数组的改变，可以改变检测对象
arr:[{name:"张三",age:19},{name:"李四",age:12},{name:"王五",age:13}],
obj:{name:"张三",age:19},
},
methods:{
sub(){
this.message = "你好世界";
}
}
})
</script>
(5) . v-bind用来绑定属性（简写用“：”）
//如果idName为true，则该div的id名为myid否则没有，注意字符串问题，外面是双引号，里面需要是单引号
<div v-bind:id="idName?'myid':' '">哈哈</div>
(6) . v-model:实现数据的双向绑定,可以用于复选框，v-model的值就是value的值，mvvm框架 m:module，v:view，vm:viewModule
爱好： <input type="checkbox" v-model="users.hobby" value="篮球">篮球
<input type="checkbox" v-model="users.hobby" value="足球">足球
<input type="checkbox" v-model="users.hobby" value="羽毛球">羽毛球
<script>
new Vue({
el:"#app",
data:{
message:"我是message数据",
users:{
username:"",
sex:"男",
// hobby需要是一个数组
hobby:[],
city:"上海"
}
},
})
</script>
(7) . 修饰符：.prevent(阻止默认事件),a不会跳转
<a v-on:click.prevent="test" href="http://www.baidu.com">点击到百度</a>
2.计算属性和观察者(表达式中可以放一些简单逻辑（设计的初衷是为了简单计算）但复杂的逻辑应该放在计算属性里面,而且计算属性可以实时动态更新)
注意：计算属性逻辑只执行一次，不需要触发的方法能放在计算属性里面，不要放在methods里面，计算属性有缓存比较节约性能，观察者实时监测，比较消耗性能。
(1) . computed
html代码
<!--计算属性computed,反转字符串-->
在input框里面输入的字符，在外面会反转显示
反转字符串 <input type="text" v-model="reverseStr">{{ myreverseStr }}
js代码
computed:{
nameReverse:function () {
return this.reverseStr.split("").reverse().join("");
}
}
(2) . 计算属性提供geter/setter方法,默认会有get方法，当改变值的时候触发set方法：
<!--计算属性computed,反转字符串-->
反转字符串 <input type="text" v-model="reverseStr">{{ myreverseStr }}
computed:{
myreverseStr:{
get:function(){
return this.reverseStr.split("").reverse().join("");
console.log("执行了get方法");
},
set:function(value){
//改变自己需要过滤的属性，不能改变自身，会死循环
this.reverseStr = value;
}
}
}
(3) . watch
html代码
在input框里面输入的字符，在外面会实时显示
watch监控 <input type="text" v-model="watchstr">{{watchstr}}
js代码
watch:{
watchstr:function(newValue,oldValue){
console.log("新的值："+newValue);
console.log("旧的值："+oldValue);
}
}
3.css和style绑定：v-bind
v-bind:class可以和普通的class来结合使用；里面提供类js的环境可以处理一些简单逻辑；
(1) . v-bind:style
HTML:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Js:
data: {
activeColor: 'red',
fontSize: 30
}
(2) .style 数组语法
HTML:
<!--动态样式一定要是对象-->
<div :style="[style1,style2]"></div>
Js:
data:{
style1:{width:"100px",height:"50px"},
style2:{background:"green"},
}
4.Key属性:当切换相同dom节点时候，vue会复用节点，如果想让节点在渲染时候也被替换掉的话可以加上key属性；
<!--key值的运用-->
<button @click="is_show=!is_show">点击我切换姓名/年龄</button><br>
<template v-if="is_show">
<!--没有加Key 还是只读取之前的节点，没变input框，只改了placeholder-->
<!--加上key唯一标识符，input框切换了-->
姓名：<input type="text" placeholder="请输入姓名" key="1"><br>
</template>
<template v-else>
年龄：<input type="text" placeholder="请输入年龄" key="2">
</template>
5. 输入表单修饰符
lazy : 相当于change事件
姓名: <input type="text" v-model.lazy="mytext">{{ mytext }}
number 过滤只能是数字，但是一开始必须是数组
姓名: <input type="text" v-model.number="mytext1">{{ mytext1 }}
trim去首位空格
姓名: <input type="text" v-model.trim="mytext1">{{ mytext1 }}
多个修饰符连用
姓名: <input type="text" v-model.trim.lazy="mytext1">{{ mytext1 }}
6. 数组改变html中不能更新，需要特殊设置
//解决方案一
//this.myarr是数组,0是下标，后面是新数据
Vue.set(this.myarr,0,{name:"set修改",age:1});
//解决方案二
在0下标删除一个，再添加一个
this.myarr.splice(0,1,{name:"splice修改",age:1});
7. ref 获取节点 , event传参
html:
<!--ref拿节点-->
<div class="mydiv" ref="myel">
我的div
</div>
<div class="mydiv" ref="myel">
我的div
</div>
<!--myfn加了括号myfn()，就没有默认的event-->
<!--解决方法 $event 1是传的参数-->
<button @click="myfn($event,1)" >点击我触发函数</button>
js:
methods:{
myfn:function(event,str){
console.log(event,str);
var el = this.$refs['myel'];
console.log(el);
},
9. ajax请求
html:
<p v-for="(v,k) in productList">{{v.productName}}</p>
js:
//生命周期 加载完了
data:function(){
return{
message:"我是message测试数据",
productList:[]
}
},
mounted(){
$.ajax({
type:"get",
url:"data/cart.json",
success:(res)=>{
//拿不到this
//箭头语法this穿透
//数据优先，通过数据控制视图，没有数据控件，循环添加数据
console.log(res.result.productList);
this.productList = res.result.productList;
}
})
},
总结
v-text 和 v-html区别
v-html可以解析标签
v-show和v-if区别：
V-show通过改变css来切换，开销更小，v-if是真正的渲染节点，性能消耗大；（操作频繁的用v-show,操作较少的用v-if）
keep-alive标签：会把相同的东西存入缓存
我的博客链接
更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
网友评论