vue.js(基础篇1)
2018-01-11 14:34
309 查看
Vue.js介绍
vue是一套用于构建用户界面的渐进式框架,vue可以自底向上逐层应用。vue的核心库只关注视图层,还易于上手,也便于与第三方库和项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,vue也完全能为复杂的单页应用提供驱动。声明式渲染
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
数据与方法
当一个vue实例被创建时,它向vue的响应式系统中加入了其data对象中所有包含的属性,当属性的值发生变化时,视图也会产生相应。只有data中的属性值才是响应式的。除了数据属性以外,vue实例还暴露了一些有用的实例属性和方法,它们都有前缀$,以便于和用户定义的属性分开。var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
实例生命周期钩子
在每个vue实例被创建时都要经过一系列的初始化过程,在这些过程中会执行一些生命周期钩子函数,如图:模板语法
#插值(文本)
数据绑定最常见的形式就是双大括号的文本插值<span>Message: {{ msg }}</span>
当绑定的数据对象上msg属性发生了变化,插值处的内容都会更新。通过使用v-once指令也能进行一次性的插值,当数据改变时,插值处的内容就不会更新了。
<span v-once>这个将不会改变: {{ msg }}</span>
#插值(HTML)
双大括号会将数据解释为普通文本,为了输出HTML,需要使用v-html指令<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
#特性
双大括号的语法不能作用在HTML特性上,需要使用v-bind指令来绑定<div v-bind:id="dynamicId"></div>
#使用JavaScript表达式
对于所有的数据绑定,vue.js都提供了完全的JavaScript表达式支持{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
指令
指令是带有v-前缀的特殊属性,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM。<p v-if="seen">现在你看到我了</p>
v-if指令将根据表达式seen的值的真假来插入或移除<p>元素
#参数
一些指令能够接收一些参数,在指令后以冒号表示。例如,v-bind指令可以用于响应式的HTML属性。<a v-bind:href="url">...</a>这里的href就是参数,告知v-blind指令将该元素的href属性和表达式url的值绑定。
#修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令该以特殊的方式绑定。缩写
#v-bind指令缩写<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>#v-on指令缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
相关文章推荐
- javascript vue-resource基础知识 js网络请求
- vue.js双向绑定基础
- [置顶] 渐进式框架 Vue.js 基础入门及简单编程演示
- Vue.js组件——组件的基础知识
- Vue.js基础知识汇总
- vue.js基础
- 快速上手Vue(适合懂基础html、css和js的人)
- vue.js基础
- Vue.js 2.0 详细教程 快速上手 - 基础篇
- vue.js基础-构造器
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
- vue.js,基础用法实例
- Vue.js基础-过滤器(filters)
- Vue.js基础(2.0+)
- vue.js--基础 v-bind绑定属性使用
- vue.js(基础篇3)
- vue.js 基础知识看点
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
- Vue.js 指南-基础