一、介绍
是一套用于构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、Vue
1.安装
vue由于是框架，所以需要安装所需的插件。
https://cn.vuejs.org/js/vue.js
这个是必需的，打开之后把所有内容复制，然后粘贴到所需要开发的文件中（必须放入js文件）。
最后使用只需引用一下就行。
<script src="../../vue.js"></script> 引入vue框架，中间是存放的js路劲
2.vue基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<div id="app">{{message}}</div>
<body>
<script src="../../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',//用于挂载要管理的元素
data: { //定义数据
message:"HelloVue",
}
});
</script>
</body>
</html>
在谷歌浏览器中按F12，在开发者模式中console控制台，改变vue对象的message值，页面显示也随之改变。
{{message}}
表示将变量message输出到标签h2中，所有的vue语法都必须在vue对象挂载的div元素中，如果在div元素外使用是不生效的。
el:"#app"
表示将id为app的div挂载在vue对象上，data表示变量对象。
二、Vue指令
1.v-once
v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。
<div id="app">
<div v-once>{{info}}</div>
</div>
<script src="../../vue.js"></script>
<script>
let obj = new Vue({
el: '#app',
data: {
info: 'hello'
}
})
</script>
上述
{{message}}
的message修改后，第一个标签数据会自动改变。
2. v-html
在某些时候我们不希望直接输出
<a href='http://www.baidu.com'>百度一下</a>
这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。
<div id="app">
<div v-html="msg"></div>
</div>
<script src="../../vue.js"></script>
<script>
let obj = new Vue({
el:'#app',
data:{
msg:'<a href="http://www.baidu.com">百度</a>'
}
})
</script>
点击直接跳转百度。
3.v-text
v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。（常用）
<div id="app">
<div v-text="msg"></div>
</div>
<script src="../../vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello word'
}
});
</script>
使用
{{message}}
是拼接变量和字符串，而是用v-text是直接覆盖字符串内容。
4. v-pre
有时候我们期望直接输出
{{message}}
这样的字符串，而不是被
{{}}
语法转化的message的变量值，此时我们可以使用
v-pre
标签。
<div>
<div v-pre>{{msg}}</div>
</div>
<script src="../../vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello word'
}
});
</script>
使用v-pre修饰的dom会直接输出字符串。
5.v-cloak
有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从
{{message}}
到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到
v-cloak
的这个标签。在vue解析之前，div属性中有
v-cloak
这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性
display:none;
，加载完成之后，css属性变成
display:block
，元素显示出来。这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示msg变量的值，div中的v-cloak元素被移除。
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script src="../../vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello word'
}
});
</script>
版权归原作者 青青草原小魔王 所有， 如有侵权，请联系我们删除。