初识vue
1. 在线引入Vue
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,删除了告警,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
或者:
<script src="https://unpkg.com/vue"></script>
2. 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="app">{{ message }}</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
3. 指令
v-bind – 数据绑定指令 如v-bind:title="message"
可简写为 :title="message"
v-on – 事件绑定 如v-on:click="clickItme"
可简写为@click="clickItme"
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!'
}
})
4. 组件化应用构建
组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例
4.1 Vue中注册组件:
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
4.2 使用prop从父性作用域将数据传到子组件,子单元通过 prop 接口与父单元进行了良好的解耦
<div id="app-7">
<ol>
<!--现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }]
}
})
5. 响应式数据
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。当这些数据改变时,视图会进行重渲染。
值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果在实例创建之后,添加一个新的属性 b ,那么对 b 的改动将不会触发任何视图的更新。
如果会在晚些时候需要一个属性,但是一开始它为空或不存在,那么仅需要设置一些初始值。如:
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
6. 工具
vue在线练习工具:https://jsfiddle.net
web学习手册:https://developer.mozilla.org/zh-CN/docs/Web
=======================================================
注:该部分为学习vue手册摘录下来的,仅供个人加深学习印象、方便整理、及以后有新的学习到的东西便于补充