初识Vue
JQuery是一个类库。vue.js是框架。
vue.js是当前最火的一个前端框架，与Angular.js、React.js并称为前端三大主流框架。
Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。
vue.js可以减少开发人员去操作DOM的繁琐工作，提高页面渲染效率。虽然jquery之类的库也提升了操作DOM的效率，但这种工作还是令人感到厌倦。
vue.js不要压缩过的，因为压缩过的体积小，没有报错信息
https://cdn.bootcss.com/vue/2.5.16/vue.js
先来运行第一个vue实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 显示在vue实例中定义的数据 -->
<h3>{{ message }}</h3>
</div>
<script type="text/javascript">
// 实例化vue
let vm = new Vue({
el: "#app", // el = element 元素
data: { // data = 数据
message: "一条信息" // message 是自己随便拟定的（中文都可以）
}
})
</script>
</body>
</html>
概述v-cloak、v-text、v-html三者的区别
v-cloak解决页面刷新或者加载时，插值表达式出现闪烁的问题
v-text没有闪烁问题、但是会覆盖元素中原本的内容（用v-html即可）
v-html 没有闪烁问题、但是会覆盖元素中原本的内容、比 v-text 强大的是 v-html 会解析标签
所以得到的结论：v-text是v-html的阉割版、是个废弃标签
- v-cloak 的基本使用
v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>
而且，v-cloak要添加css样式、这个样式可以放在link引入的css文件里或者内联样式中/
v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级
<style media="screen">
[v-cloak] {
display: none !important;
}
</style>
v-cloak小案例
<!-- v-cloak 基本使用 -->
<html lang="en">
<head>
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<style media="screen">
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>+++{{message}}---</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '有一条信息'
}
})
</script>
</body>
</html>
. v-html 的基本使用
</head>
<body>
<div id="app">
<h4 v-cloak>+++{{message}}===</h4>
<!-- v-cloak：用于解决页面刷新时、插值表达式闪烁问题 -->
<p v-text='message'>+++===</p>
<!-- v-text 会覆盖元素中的内容、但是 v-cloak 只是替换占位符里面的内容，不会覆盖占位符以外的元素内容-->
<p v-html='message2'>1234</p>
<!-- v-html 也会覆盖元素中的内容、但是 v-html 可以解析 HTML 标签-->
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '还是一个信息',
message2: '<h1>标签</h1>'
}
});
</script>
</body>
v-bind:指令学习
v-bind: 是Vue 中，提供的用于绑定属性的指令
注意：v-bind:指令可以被简写为:
<body>
<div id="app">
<input type="button" value="anniu" v-bind:title="myTitle + 'qwertyuiop'">
<!-- 占位符传参 + 字符串 相结合 -->
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '信心又见信息',
message2: '<h1>标签又见标签</h1>',
myTitle: '这是一个自定义属性值'
}
});
</script>
</body>
v-on:定义Vue中的事件
v-on:事件绑定机制
注意：v-on:指令可以被简写为@
v-on:事件绑定机制
<body>
<div id="app">
<input type="button" value="按钮" v-on:mouseenter='tanChuang'>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '还是一条信息',
message2: '<h1>也是标签</h1>',
myTitle: '这是一个自定义属性值'
},
methods: {
tanChuang: function() {
alert('ok')
}
}
});
</script>
</body>
