Vue.js学习I(基本使用)

2017-02-07 JsPy&Others

VUE.JS

有用的链接:

VUE笔记, 手打代码与文档于中文VUE教程网站

第一部分简介

介绍

Vue.js 是一套轻量级js框架, 可以用于构建自己相关的html服务等.
Vue.js在设计之初的目标是通过尽可能简单的API去实现响应数据绑定和组合的视图套件

特性:

引用:

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

vue与vue-cli:
vue-cli是vue的一个命令行工具, 在熟悉vue之后会进行学习.

声明式渲染

例子1

1
2
3

<div id="app">
  \{\{ message }}
</div>

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

JS中将app与html的DOM绑定到了一起, 所以可以在浏览器中的控制台中更改: app.message="XXX"来
动态修改DOM, (也就可以避免使用jQuery+ifelse去做判断更新的复杂代码).

例子2

<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()
  }
})

这个例子里面用VUE绑定了一个DOM, v-bind被称为一个指令, 以v-开头代表是一个Vue.js
的特殊属性, 就像Agular中的ng-一样.这句指令(v-bind:title="message")代表将这个DOM的
title属性与Vue实例的message绑定到一起.

同样的, 在控制台中可以使用app2.message='Other commments'进行更新.

条件与循环

条件

<div id="app-3">
    <p v-if="seen">
    Now U C ME</p>
</div>

var app3 = new Vue({
    el: "#app-3",
    data: {
      seen: true
    }
  })

这里例子中有一个v-if的属性, 代表如果是true, 将进行显示, 否则不显示.
控制台中用app3.seen=false进行隐藏. 过渡中有可以有隐藏效果

循环

<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 JS'},
      {text: 'Learn Vue'},
      {text: 'Build Something awesome'}
    ]
  }
})

可以用app4.todos.push({text:'new message!'})来更新一个新的内容~

处理用户输入

事件监听

v-on用于绑定事件,Vue中的methods实现方法的定义.

<div id="app-5">
  <p>\{\{message}}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods:{
    reverseMessage: function(){
      this.message = this.message.split("").reverse().join("")
    }
  }
})

双向绑定

v-model用于绑定DOM和输入

<div id="app-6">
  <p>\{\{message}}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue~"
  }
})

构造用户组件

这部分稍微有点抽象,过程是这样的:

用Vue定义一个新的DOM, 如教程中所讲, 一个组件实质上是一个有预定义选项的Vue实例
模板中写入组件
对这个组件绑定数据

Vue.component定义DOM, props定义传入对象, templates决定输出内容

<div id="app-7">
  <ol>
    <tool-set v-for="a in todoList" v-bind:todo="a"></tool-set>
  </ol>
</div>

Vue.component("tool-set",{
  props:['todo'],
  template:'<li>\{\{todo.text}}</li>'
})
var app7 = new Vue({
  el:"#app-7",
  data: {
    todoList: [
      {text: "No.1"},
      {text: "No.2"},
      {text: "No.3"}
    ]
  }
})