vuejs

标签：

首先，这里是接触前端不到半年的，下面看cnvuejs

vuejs是一个界面库，能很好地与已有项目整合

vuejs生态系统提供了一系列工具与库，本质上只是一套技术栈

#Hello World

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

new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue.js!‘
  }
})

----------

Hello Vue.js!
----------

#双向绑定

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

new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue.js!‘
  }
})

----------

Hello Vue.js!

Hello Vue.js!

---------- 

#渲染列表

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

new Vue({
  el: ‘#app‘,
  data: {
    todos: [
      { text: ‘Learn JavaScript‘ },
      { text: ‘Learn Vue.js‘ },
      { text: ‘Build Something Awesome‘ }
    ]
  }
})

----------

· Learn JavaScript

· Learn Vue.js

· Build Something Awesome

---------- 

#处理用户输入

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

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

-------

点击按钮文字倒序

-------

#综合，添加与删除列表

<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

new Vue({
  el: ‘#app‘,
  data: {
    newTodo: ‘‘,
    todos: [
      { text: ‘Add some todos‘ }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ‘‘
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})

概述

 尽可能简单的API实现响应的数据绑定和组合的视图组件

例子1：

<!-- 这是我们的 View -->
<div id="example-1">
  Hello {{ name }}!
</div>

// 这是我们的 Model
var exampleData = {
  name: ‘Vue.js‘
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
  el: ‘#example-1‘,
  data: exampleData
})

----------

Hello Vue.js!
----------

当打开浏览器的控制台修改exampleData.name，文字也更新，不需要撰写DOM操作代码

例子2

<div id="example-2">
  <p v-if="greeting">Hello!</p>
</div>

var exampleVM2 = new Vue({
  el: ‘#example-2‘,
  data: {
    greeting: true
  }
})
------
Hello!
------
v-if被称为指令，指令前缀v-，表示他们是vuejs提供的特殊特性，他们会对绑定的目标元素添加响应式的特殊行为，在控制台设置exampleVM2.greeting为false，内容消失。
这个例子演示了，不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。
其他指令每个都有特殊功能，v-for指令用于显示数组元素，v-bind指令用于绑定HTML特性

组件系统

可重复的小组件构建大型应用

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

vue组件语法参考了Web组件规范，vue组件非常类似于自定义元素，实现了Slot API 与 is 特性，但是，有几个关键的不同→

组件系统是用vuejs构建大型应用的基础

#Hello World

 参考：https://zhuanlan.zhihu.com/p/20302927

http://cn.vuejs.org/guide/overview.html

http://www.html-js.com/article/column/99

http://www.zhihu.com/question/39943474

http://blog.jobbole.com/72124/

http://www.cnblogs.com/lhb25/archive/2011/01/10/1932284.html

http://www.tuicool.com/articles/eu6faqZ

http://www.cssue.com/

vuejs

标签：

原文地址：http://www.cnblogs.com/juniper/p/5596430.html