学习使用vue.js（二）声明式渲染 和 指令绑定

<———
在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。
正题：
如果你不愿意多花时间去自学vue.js 官网的API，那么你可以在跟着下面的例子学习最实用，最容易上手的案例。

正题：
如果你还不会使用最基本的vue.js的话，推荐你先去看一下我的“1.学习使用vue.js（适合初学者）”然后再来学习以下内容：

这篇文章主要讲vue的基本指令：

首先你需要引入vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

---

声明式渲染（其实就是在页面添加内容）
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

---

第一种方法：v-html绑定一条内容

<div id="app">
    <div v-html="msg"></div>
</div>

你可以在js里这么写：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'<h1>HELLO VUE</h1>'
            }
        }
    })
</script>   

然后你的页面会出现一条一模一样的内容。

第二种方法：v-text绑定一条内容

<div id="app">
    <div v-text="msg"></div>
</div>

你可以在js里这么写：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
</script>   

第三种方法：{{msg}}绑定一条内容

<div id="app">
    <h1>{{msg}}</h1>
</div>

你可以在js里这么写：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
</script>   

这里需要说一下三种方法的区别：
v-html: 可以绑定html标签，并且浏览器会识别你的标签
v-text 和 {{}} : 不可以识别标签，会把你写的“<></>”以文本的形式展示到浏览器上

---

除了文本插入，你还可以像这样来绑定元素特性：

用 v-bind 来绑定元素的属性

<div id="app">
    <input type="text" v-bind:value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

v-bind其实就是指令。你今后所有看到的 ”v-“就是绑定一条指令v-bind可以所写为一个冒号 ”:“

<div id="app">
    <input type="text" :value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

当然，你并不是只能绑定表单输入框的value,你也可以绑定其他元素的tittle、src、href、alt等等…..

下面是VUE官网解释的v-bind:

这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

---

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id='app'>
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg"/>
</div>

js:

data(){
    return {
        msg : 'hello vue'
    }
}

你可以试着在表单输入框里面输入点东西，查看效果

---

文章持续跟新中。。。
请持续关注。。。。
如果你想学习的话，请在下方评论你的想法，
让我们共同进步~

上一篇：1.学习使用vue.js（适合初学者）
http://blog.csdn.net/heshuaicsdn/article/details/78949376

下一篇：学习使用vue.js（三）条件与循环 v-if、 v-for
http://blog.csdn.net/heshuaicsdn/article/details/79199252