Vue学习笔记-101

v-bind:绑定一个标签属性：

<div  id="app" v-bind:title=“message”>
    Title属性用于在鼠标悬浮到内容上时，出现tooltip
</div>

<script>
 var myVar = new Vue({
    el : "app",
    message : "This is the app element"
})
</script>

注意：

HTML标签中的ID不用写井#，但是js里面“el : '#xxx'”绑定元素的地方要写#号

v-on绑定的时候，v-on：click="functionName"

①v-on冒号跟的是click不是onclick;

②函数在这里作为对象引用，不用加括号

③参数名data(单数)；methods(复数)

<div id="myDiv">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

<script>
var app = new Vue({
    el : '#myDiv',
    data:{
        message:'这是用于逆转的消息'
    },
    methods:{
        reverseMessage : function () {
            this.message = this.message.split("").reverse().join()
        }
    }
})

v-model实现表单输入与应用状态的双向绑定(两者同时改变)

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message"></input>
</div>

<script>
var myVar= new Vue({
    el: '#app',
    data:{
        message:'小桃花'
    }
})
</script>

Note : new Vue() 接受的参数是el/data/methods

v-html标签 : 动态改写页面的HTML