Vue的基本用法

代碼

// 如果是input標簽就要使用<v-model>來調(diào)用data中的值
// 如果是p標簽就可以使用{{}}(這里面可以直接調(diào)用一些js的語法)或者<v-text>來調(diào)用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">來調(diào)用data中的值
// 如果是要綁定監(jiān)聽事件，就要現(xiàn)在Vue中寫一個methods方法來，然后使用<v-on:click="">或者是<@click="">來調(diào)用methods里面的方法
<div id="app">
    <h2>2.強制數(shù)據(jù)綁定</h2>
    <img src="imgUrl"> <!--不能獲取到圖片-->
    <img v-bind:src="imgUrl"> <!--強制綁定-->
    <img :src="imgUrl"> <!--省略v-bind-->

    <h2>3.綁定事件監(jiān)聽</h2>
    <button v-on:click="test">test1</button> <!--事件監(jiān)聽 將test方法寫在下面的methods中-->
    <button @click="test2(msg)">test2</button>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: '<a >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:遍歷數(shù)組/對象
7 v-on：綁定事件監(jiān)聽，一般簡寫為@
8 v-bind:強制綁定解析表達式，可以省略v-bind
9 v-model: 雙向數(shù)據(jù)綁定
10 ref:指定唯一標識，vue對象通過$els屬性訪問這個元素對象
11 v-cloak:防止閃現(xiàn) 與css配合：【v-cloak】{display:none}