Vue的基本用法
代码
// 如果是input标签就要使用<v-model>来调用data中的值
// 如果是p标签就可以使用{{}}(这里面可以直接调用一些js的语法)或者<v-text>来调用data中的值
<div id="test">
<input type="text" v-model="name">
<p>Hello {{name}}</p>
<p v-text="name"></p> <!--可以用v-text获取name的值 也可以直接用{{name}}-->
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#test', <!--选择器字符串-->
data: {
name: 'tolei'
}
})
</script>
// 如果是img标签就要使用<v-bind：src="imgUrl">或者是直接用<:src="imgUrl">来调用data中的值
// 如果是要绑定监听事件，就要现在Vue中写一个methods方法来，然后使用<v-on:click="">或者是<@click="">来调用methods里面的方法
<div id="app">
<h2>2.强制数据绑定</h2>
<img src="imgUrl"> <!--不能获取到图片-->
<img v-bind:src="imgUrl"> <!--强制绑定-->
<img :src="imgUrl"> <!--省略v-bind-->
<h2>3.绑定事件监听</h2>
<button v-on:click="test">test1</button> <!--事件监听 将test方法写在下面的methods中-->
<button @click="test2(msg)">test2</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '<a href="http://www.baidu.com">I am Tom </a>',
imgUrl: 'https://cn.vuejs.org/images/logo.png'
},
methods: {
test(){
alert("hello")
},
test2(content) {
alert(content)
}
}
})
</script>
1 v:text:更新元素的textContent
2 v-html: 更新元素的innerHTML
3 v-if:如果为true 当前标签才会输出到页面
4 v-else:如果为false,当前标签才会输出到页面
5 v-show:通过控制display样式来控制显示/隐藏
6 v-for:遍历数组/对象
7 v-on：绑定事件监听，一般简写为@
8 v-bind:强制绑定解析表达式，可以省略v-bind
9 v-model: 双向数据绑定
10 ref:指定唯一标识，vue对象通过$els属性访问这个元素对象
11 v-cloak:防止闪现 与css配合：【v-cloak】{display:none}
