Vue.js之Hello Vue！

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

引入Vue.js

在<head>中加入

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<body>中为

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

js文件中为

var app = new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue!' 
   }
})

打开html文件

Hello Vue!

el中为一个选择器，表示id为app的DOM元素，{{msg}}是一个模板标签，和data中的msg绑定，打开后，{{msg}}内容会被替换成Hello Vue!，这种绑定是双向绑定。所有元素都是响应式的。

除了绑定文本标签{{msg}}，还可以绑定html标签的属性
html中

<div id="app">
  <span v-bind:title="msg">
    Hover your mouse over me for a few seconds to see my dynamically bound title!  
  </span>
</div>

js中

var app = new Vue({
    el: '#app',
    data: {
        msg: 'You loaded this page on ' + new Date()
    }
})

打开html

v-bind属性称为指令，v-开头。这个指令的简单含义是说：将这个元素节点的 title属性和 Vue 实例的 msg属性绑定到一起。

条件和循环

使用v-if来控制元素的是否显示

<div id="app">
  <span v-if="seen">
      你看不见我
  </span>
</div>

var app = new Vue({
    el: '#app',
    data: {
        seen: false
    }
})

打开html
什么都没有

我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据
使用v-for进行元素循环

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

var app = new Vue({
    el: '#app',
    data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
    }
})

1、Learn JavaScript
2、Learn Vue
3、Build something awesome

处理用户输入

使用v-on绑定事件

<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="reverseMsg">点击</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        msg:"Vue.js!"
    },
    methods:{
      reverseMsg:function () {
          this.msg = "Hello " + this.msg
      }
    }
})

在 reverseMsg方法中，我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。

使用v-model进行双向绑定

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

var app = new Vue({
    el: '#app',
    data: {
        msg:"Hello Vue.js!"
    }
})

Vue.js之Hello Vue！

引入Vue.js

条件和循环

处理用户输入

推荐阅读更多精彩内容