Vue学习01

本文主要是介绍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> 

这篇关于Vue学习01的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！