VUE 入门基础(2)

用户1197315

发布于 2018-01-22 11:09:50

7960

发布于 2018-01-22 11:09:50

文章被收录于专栏：柠檬先生

二，起步

引用方式可以使用 vue-cli

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

　　　　声明式渲染

　　　　　　<div id="app">
  　　　　　　　　{{ message }}
　　　　　　</div>
　　　　　　var app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　data: {
　　　　　　　　　　message:  'Hello Vue'
　　　　　　　　}
　　　　　　})

　　在DOM元素上绑定属性

　　　　　　<div id="app-2">
  　　　　　　<span v-bind:title="message">
   　　　　　　 Hover your mouse over me for a few seconds to see my dynamically bound title!
  　　　　　　</span>
　　　　　</div>
　　　　var app2 = new Vue({
　　　　　　el: '#app-2',
　　　　　　data: {
　　　　　　　　　　message: 'You loaded this page on ' + new Date()
　　　　　　　　}
　　　　　　})

　　v-bind 属性被称为指令，指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。

　　条件与循环

　　控制切换一个元素的显示也相当简单：

　　<div id="app-3">
 　　　　 <p v-if="seen">Now you see me</p>
　　</div>
　　var app3 = new Vue({
　　　　el: '#app-3',
　　　　　　data: {
　　　　　　　　seen: true
　　　　　　}
　　　})

　绑定数据到数组来渲染一个列表

　　<div id="app-4>
　　　　<ol>
　　　　　　<li v-for="todo in todos">
　　　　　　　　{{ todo.text }}
　　　　　　</li>
　　　　</ol>
　　</div>
　　var app4 = new Vue({
　　　　　　el: '#app-4',
　　　　　　data: {
　　　　　　　　todos: [
　　　　　　　　　　{text: 'Learn JavaScript'},
　　　　　　　　　　{text: 'Learn Vue'},
　　　　　　　　　　{text: 'Build something awesome'}
　　　　　　　　]
　　　　　　}
　　　　})

处理用户输入

　　用v-on 指令绑定一个监听事件用于调用我们vue实例中定义的方法。

　　<div id="app-5">
　　　　　　<p>{{message}}</p>
　　　　　　<button v-on:click="reverseMessage">Reverse Message</button>
　　</div>
　　var app5 = new Vue({
　　　　　　el: '#app-5',
　　　　　　data: {
　　　　　　　　message: 'Hello Vue.js!'
　　　　　　},
　　　　　　methods: {
　　　　　　　　reverseMessage: function () {
　　　　　　　　this.message = this.message.splict(' ').reverse().join(' ')
　　　　　　}
　　　　}
　　})

用 v-model 指令在表单和应用状态中做双向数据绑定。

　　<div id="app-6">
　　　　<p>{{message}}</p>
　　　　<input v-model="message">
　　</div>
　　var app6 = new Vue({
　　　　el: '#app-6',
　　　　data: {
　　　　　　message: 'Hello Vue!'
　　　　}
　　})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-12-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https