vue快速入门(3)

1.3.vue入门案例

1.3.1.HTML模板

在hello-vue目录新建一个HTML

在hello.html中，我们编写一段简单的代码：

<div id="app">

   <h2>xx 非常帅</h2>

</div>

h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。

1.3.2.vue渲染

然后我们通过Vue进行渲染：

<div id="app">
    <h2>{{name}} 非常帅</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"xiaohong"
        }
    })
</script>

• 首先通过 new Vue()来创建Vue实例

• 然后构造函数接收一个对象，对象中有一些属性：

  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div

  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

    • name：这里我们指定了一个name属性

• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

打开页面查看效果：

更神奇的在于，当你修改name属性时，页面会跟着变化

1.3.3.双向绑定

我们对刚才的案例进行简单修改：

<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}} 非常帅,
        有{{num}}个人喜欢他。
    </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"xiaohong",
            num:1
        }
    })
</script>

• 我们在data添加了新的属性：num

• 在页面中有一个input元素，通过v-model与num进行绑定。

• 同时通过{{num}}在页面输出

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• input与num绑定，input的value值变化，影响到了data中的num值

• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

1.3.4.事件处理

我们在页面添加一个按钮：

<button v-on:click="num++">点我</button>

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

• 普通click是无法直接操作num的。