目录
一.Vue.js 简介
Vue.js是一套构建用户界面的UI框架，它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。
Vue.js的定位是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。Vue.js受到越来越多关注的一个重要原因：结合了Angular指令与react组件思维使代码简单书写方便易上手，你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：。
二.vue.js的使用
1.引入vue.js库
<script src="vue.js"></script>2. 创建vue实例
<script>
new Vue({
el：'#app',
data: {msg:'Hello,Vue.js 2'}
})
</script>3. 完整html导入
<div id="app">
hello Vue!
</div>4.完整的helloWorld代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>三.模板语法-文本语法
1.数据绑定最常见的形式就是使用{{}}语法（双大括号）
<p>{{msg}}</p>2.v-text语法绑定
<p v-text="msg"></p>3.v-html文本绑定语法：可用于输出HTML
<div id="app">
<div v-html="rawMsg"></div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
rawMsg:'<h1>你好vue</h1>'
}
})
</script>四.模板语法-属性
给html标签绑定一个属性值应该使用 v-bind:属性名称
以下代码给h1绑定一个新的id和title属性
<div id="app">
<h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
dyId:'best',
dyTitle:'看见我的人一生平安'
}
})
</script>绑定属性也是可以直接简写：
<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>五.指令
这里就不一一列举了，以下是一些常用的指令
•v-text： <div v-text="message2"></div>
•v-html： <div v-html="message2"></div>
•v-show：<h1 v-show="ok">Hello!</h1>
•v-if：<div v-if="type === 'A'">
•v-else：<div v-else>
•v-else-if：<div v-else-if="type === 'B'">
•v-for：<div v-for="(item, index) in items"></div>
•v-on==@：<button v-on:click="doThat('hello', $event)"></button>
•v-bind==：<img v-bind:src="imageSrc"> 缩写<img :src="imageSrc">
•v-model：<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>
如：条件指令 v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。
<div v-if="isLogin">你好！</div>也可以用 v-else 添加一个“else 块”：
<div v-else="">请登录后操作</div><div id="app">
<div v-if="isLogin">你好</div>
<div v-else="">请登录后操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>如：v-show指令
用于根据条件展示元素的选项是 v-show 指令
<h1 v-show="isShow">Hello!</h1>v-show 只是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
六.computed计算
从现有数据计算出新的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>计算：从现有的数据计算出新的数据</h1>
<p>n1:{{n1}} <input type="text" v-model.number="n1"></p>
<p>n2:{{n2}}</p>
<p>n3:{{n3}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
n1:10,
n2:5,
},
// 从现有数据计算出新的数据
computed:{
"n3":function(){
return this.n1+this.n2;
}
}
})
</script>
</body>
</html>
结果：n1+n2=n3 输入框可获取输入值计算
n1:12
n2:5
n3:17
七.watch监听
主要用于监听数据的变化，并执行回调函数handler
<div id="app">
<span>{{person.age}}</span><input type="text" v-model="person.age"><br />
<span>{{num}}</span><input type="text" v-model="num">
</div>
<script>
new Vue({
el:"#app",
watch:{
"num":{
// 当num发送变化的时候，执行handler函数
handler(nval,oval){
console.log("数据由",oval,"变化为",nval);
console.log("num变化了:",this.num);
}
},
// 引用类型监听
"person":{
handler(nval,oval){
// 引用类型nval和oval是一样的
console.log("数据由",oval.age,"变化为",nval.age);
console.log("num变化了:",this.person);
},
// 深度监听
deep:true
}
},
data:{
person:{
age:15
},
num:8
},
})
</script>八.directives自定义指令
bind绑定执行一次
insert 插入执行一次
update 每更新执行一次
如： 实现的自动获取焦点的功能
<div id="app">
<h1>自定义指令</h1>
<p v-text="msg"></p>
<!-- 实现的自动获取焦点的功能 -->
<input type="text" v-focus="true">
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"你好vue"
},
directives:{
"focus":{
// el指令所在的节点，binding指令相关的数据binding.value
// 获取指令所在的节点，执行第三方基于dom的插件
inserted(el,binding){
console.log(el,binding);
el.focus();
}
}
}
})
</script>九.filters过滤-管道
一般常用于格式化数据
用法如：保留小数点两位
filters:{
fix(value,arg=2){
return value.toFixed(arg)
}
}
html使用
<p>{{num|fix}}</p>
<p>{{num|fix(2)}}</p>
<p v-text=“num|fix”></p>以上就是我今天要总结的内容，