vue快速入门(3)

1.3.vue入门案例

1.3.1.HTML模板

在hello-vue目录新建一个HTML

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

   

xx 非常帅

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

1.3.2.vue渲染

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

    
{
   {name}} 非常帅

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

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

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

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

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

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

打开页面查看效果：

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

1.3.3.双向绑定

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

    
    

        {
   {name}} 非常帅,
        有{
   {num}}个人喜欢他。
    

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

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

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

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

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

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

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

1.3.4.事件处理

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

点我

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

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