Vue学习01

Vue.js 是什么

　　Vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用。

安装
1. 直接用 <script> 引入
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. NPM
　　$ npm install vue
3. 命令行工具（CLI）
　　在不熟悉基于node.js的构建工具时，不建议新手直接使用 vue-cli

语法
　　vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

文本插值
-- html

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

-- js

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

--view

Hello Vue!

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的，
Vue 不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上（#app）然后对其进行完全控制

绑定元素 attribute
--html

<div id="app-2">
　　<span v-bind:title="message">
　　　　鼠标悬停几秒钟查看此处动态绑定的提示信息！
　　</span>
</div>

--js

var app2 = new Vue({
　　el: '#app-2',
　　data: {
　　message: '页面加载于 ' + new Date().toLocaleString()
　　}
})

带有前缀 v- 的称为指令，表示它们是 Vue 提供的特殊 attribut，会在渲染的 DOM 上应用特殊的响应式行为

“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

循环绑定数组
--html

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

--js

var app4 = new Vue({
　　el: '#app-4',
　　data: {
　　　　todos: [
　　　　　　{ text: '学习 JavaScript' },
　　　　　　{ text: '学习 Vue' },
　　　　　　{ text: '整个牛项目' }
　　　　]
　　}
})

--view

1. 学习JavaScript
2. 学习 Vue
3. 整个牛项目

在控制台输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目

处理用户输入
--html

<div id="app-5">
　　<p>{{ message }}</p>
　　<button v-on:click="reverseMessage">反转消息</button>
</div>

--js

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

v-on 指令：用于事件监控，通过它调用在 Vue实例中定义的方法 reverseMessage

组件化应用构建
定义名为 todo-item 的新组件:
--js

Vue.component('todo-item', {
　　template: '<li>这是个待办项</li>'
})
var app = new Vue(...)

--html

<ol>
　　<!-- 创建一个 todo-item 组件的实例 -->
　　<todo-item></todo-item>
</ol>

生命周期

　

每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等
--js

new Vue({
　　data: {
　　a: 1
},
　　created: function () {
　　// `this` 指向 vm 实例
　　　　console.log('a is: ' + this.a)
　　}
})
// => "a is: 1"

created：用来在一个实例被创建之后执行代码

　v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>