引入vue + 初始化
<body>
<div id='app'></div>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
使用插值表达式 {{}}
<div> {{message}} </div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
v-text 指令
<div v-text="message"></div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
v-text 使用效果与插值表达式基本相同，但插值表达式在网速不好的时候会无法及时渲染数据，v-text 则可以避免这个问题 (就算网速不好也不会出现字符串)
v-html 指令
<div v-html="message"></div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '<h1>Hello World!</h1>'
}
});
</script>
v-html使用效果与v-text基本相同，但v-text会把数据转换成字符串后渲染到页面，所以如果数据中含有标签，则无法被渲染- 在生产环境中动态渲染HTML是非常危险的，因为容易导致
XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用
v-for 指令
<ul>
<li v-for='item in items'>
{{item}}
</li>
</ul>
<script>
var app = new Vue({
el: '#app',
data: {
items: ['数据一','数据二','数据三','数据四','数据五'],
}
});
</script>
v-for 放在需要循环渲染的标签上，注意位置
v-if & v-else & v-show 指令
<div v-if='isTrue'>当 isTrue 为 true 时渲染</div>
<div v-else>当上面那个 v-if 判断未通过时，显示这个</div>
<div v-show='isTrue'>当 isTrue 为 true 时显示</div>
<script>
var app = new Vue({
el: '#app',
data: {
isTrue: true,
}
});
</script>
v-if与v-else可以搭配使用，也可以单独使用v-ifv-else不需要传参，也就是说他只对应第一次出现的v-if，多个v-if以第一个为准v-show是通过display='none' 隐藏标签，而v-if只有在判断通过后才会渲染标签
v-on 指令
<div v-bind:click="myClick">点击触发事件</div>
<div @click="myClick">指令简写版点击触发事件</div>
<div v-bind:keyup.enter="myEnter">点击触发事件</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods: {
myClick: function(){
alert('点击事件触发成功');
},
myEnter: function(){
alert('enter键被触发');
}
}
});
</script>
v-bind绑定事件 可简写为 @- 触发的事件统一写在
methods对象下 keyup对于键盘上的键，可以指定某个键位的 ASCII 码触发对应事件
v-bind 指令
<img v-bind:src="imgSrc">
<a v-bind:href='myLink'>绑定链接地址</a>
<a :href='myLink'>缩写版绑定链接地址</a>
<div :class='className'>1.绑定 Class</div>
<div :class='{classA:isOk}'>2.绑定 Class 中的判断</div>
<div :class='[classA,classB]'>3.绑定 Class 中的数组</div>
<div :class='isOk?classA:classB'>4.绑定 Class 中的三元运算符</div>
<a v-bind:style="{ color:red , fontSize:font }">绑定 style 样式</a>
<a v-bind:style="styleObject">对象绑定 style 样式</a>
<script>
var app = new Vue({
el: '#app',
data: {
isOk: true,
imgSrc: 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super',
myLink: 'https://www.baidu.com',
className: 'classA',
classA: 'classA',
classB: 'classB',
red: 'red',
font: '30px',
styleObject: {
color : 'blue',
fontSize: '30px',
fontWeight: 'bold'
}
}
});
</script>
v-bind是用来绑定标签属性的v-bind可以缩写
v-model 指令
<div v-text="message"></div>
<input type="text" v-model="message">
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
v-model 功能是数据的双向绑定- 在
input上改变message，div上也会随着改变，反之亦然 - 修饰符
.lazy-> 懒加载，在默认情况下，v-model在input事件中同步输入框的值与数据 ，通过添加lazy转变为在change事件中同步.number-> 输入字符串转换为数字，从头开始，遇到非数字取消转换.trim-> 输入去掉首尾空格
v-pre & v-clock & v-once
<style tyupe="text/css">
[v-cloak]{
display: none;
}
</style>
<div v-pre>{{message}}</div>
<div v-once>{{message}}</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
v-pre-> 直接输出源代码，就是在标签中加入v-pre就不会输出vue中的data值了v-bloak-> 当网络较慢，网页还在加载Vue.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码，v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的 HTML 元素上被移除v-once-> 在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
