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}