根 vue 实例
let viewModel = new Vue({ ???// 包含数据、模板、挂载元素、方法、生命周期钩子等选项})Hello Wrold
<!-- 这是我们的 View --><div id="app"> ?Hello {{ name }}!</div>// 这是我们的 Modelvar model = { ?name: ‘Vue.js‘}// 创建一个 Vue 实例或 "viewModel"// 它连接 View 与 Modelvar viewModel = new Vue({ ?el: ‘#app‘, ?data: model})生命周期
上图的就是
ViewModel的生命周期，仔细的看其实并不难。目前先了解一下。流程大致像这样
created()->beforeCompile()->compiled()->ready()->attached()->detached()->beforeDestroy()->destroyed() ??
更详细的介绍，请点这里查看API文档
绑定
简单的理解就是模板字符串功能，放心的在任何你想用的地方去用，假如错了vue会给你提示。
定界符都是可以修改的
// 模板定界符Vue.config.delimiters = [‘{{‘, ‘}}‘]// html模板定界符Vue.config.unsafeDelimiters = ["{{{", "}}}"]数据的绑定
<span>消息: {{ msg }}</span> ??<!-- 同步更新js里面的数据 --><span>他将永不会改变: {{* msg }}</span> ??<!-- 第一次插入之后就不更新了 --><div>{{{ raw_html }}}</div> ?<!-- 插入原生的 html --><div id="item-{{ id }}"></div> ?<!-- 放在id中 -->表达的绑定
不可使用，var/let关键字声明变量，也不能使用if/for流程控制。
{{ number + 1 }} ??// 做简单的运算{{ ok ? ‘YES‘ : ‘NO‘ }} ??// 三元表达式{{ message.split(‘‘).reverse().join(‘‘) }} ??// 调用该对象上的方法 指令
当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
<p v-if="ok">Hello!</p> <!-- 根据if里面的值，确定是否编译 --><a v-bind:href="url"></a> ?<!-- 等于href="{{url}}" 这里 href 是参数，将元素的 href 属性传进去。 ????告诉vue元素的 href 特性跟表达式 url 的值绑定 --><a v-on:click="doSomething"> <!-- v-on表示监听，传入了click参数，表示当click事件发生的时候，执行doSomething函数 --><a v-bind:href.literal="/a/b/c"></a><!-- .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式 -->v-bind 缩写
<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a><!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>
过滤器
过滤器提供了一种执行文本转换的方法，比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用，也可以在v-bind指令的表达式中使用。
使用Vue,可以有两种不同的方式注册过滤器：全局和本地过滤器。
全局过滤器
来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器，其作用就是在价格前面加上美元符号：
// 声明一个全局的过滤器Vue.filter(‘toUSD‘, function (value) { ???return `$${value}`})// 在模板中这样使用 文本插值的使用方式<div id="app"> ???<h1>{{ price | toUSD}}</h1></div>特别声明： 过滤器定义必须始终位于Vue实例之上，否则你将会得到一个“Failed to resolve filter: toUSD”的错误信息。
本过过滤器
本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写：
let app = new Vue({ ???el: ‘#app‘, ???data () { ???????return { ???????????name: ‘hello world !‘ ???????} ???}, ???// 声明一个本地的过滤器 ???filters: { ???????Upper: function (value) { ???????????return value.toUpperCase() ???????} ???}})<div id="app"> ???<h1>{{ name | Upper }}</h1></div>正如上例中看到的，本地过滤器存储在Vue组件中，作过filters属性中的函数。这个时候你想注册多少个就能注册多少个：
let app = new Vue({ ???el: ‘#app‘, ???data () { ???????return { ???????????name: ‘hello world !‘ ???????} ???}, ???// 声明一个本地的过滤器 ???filters: { ???????Upper: function (value) { ???????????return value.toUpperCase() ???????}, ???????Lower: function (value) { ???????????return value.toLowerCase() ???????} ???}})计算属性
<div id="example"> ?a={{ a }}, b={{ b }}</div>var vm = new Vue({ ?el: ‘#example‘, ?data: { ???a: 1 ?}, ?computed: { ???// 一个计算属性的 getter ???b: function () { ?????// `this` 指向 vm 实例 ?????return this.a + 1 ???} ?}})给计算属性设置setter
computed: { ???fullname: { ???????get: function() { ???????????return this.firstName + ‘ ‘ + this.lastName ???????}, ???????set: function() { ???????????let names = newValue.split(‘ ‘) ???????????this.firstName = names[0] ???????????this.lastName = names[names.length - 1] ???????} ???}}Class 与 Style 绑定
vue特意增强了他们，支持对象和数组绑定
Class 对象绑定
<div class="static" :class="{ ‘class-a‘: isA , ‘class-b‘: isB}"></div>data: { ???isA: true, ???isB: false}<div class="static" :class="classObjcet"></div>data: { ???classObject: { ???????‘class-a‘: true ???????‘class-b‘: false ???}}//渲染之后<div class="static class-a"></div>Class 数组语法
<div :class="[classA,classB]"></div>data: { ???classA: ‘class-a‘ ???classB: ‘class-b‘}// 渲染为<div class="class-a class-b"></div><div :class="[classA, isB? classB : ‘‘]"></div>// 始终添加classA对应的类名，根据isB的值确认是否添加classB对应的值。// 在1.0.19+之后，为了更明了的写法，支持数组里面嵌套对象语法<div :class="[classA, {classB: isB, classC: isC}]"></div>Style 对象语法
CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）,自动添加浏览器的前缀。
<div :style="{color: activeColor, fontSize: fontSize + ‘px‘ }"></div>data: { ????activeColor: ‘red‘, ???fontSize: 30}<div :style="styleObject"></div>data = { ???styleObject: { ???????color: ‘red‘, ???????fontSize: ‘13px‘ ???}}Style 数组语法
<div :style="[styleObjectA,styleObjectB]"></div>data = { ???styleObjectA: { ???????fontSize: ‘15px‘ ???}}条件渲染
特别说明: v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
v-if
<h1 v-if="ok">yes</h1><h1 v-else>no</h1><template v-if="ok"> ?<h1>Title</h1> ?<p>Paragraph 1</p> ?<p>Paragraph 2</p></template>
v-show
不支持 template 元素包裹
<h1 v-show="ok">Hello!</h1>// 在组件上不能使用 v-else<custom-component v-show="condition"></custom-component><p v-show="!condition">这可能也是一个组件</p>
if 与 show 之间的战争
如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
列表渲染
<ul id="list"> ???<li v-for="item in items"> ???????{{ item.message }} ???</li></ul>var vm = new Vue({ ???el: ‘#list‘, ???data: { ???????items: [ ???????????{ message: ‘Foo‘ }, ???????????{ message: ‘Bar‘} ???????] ???}}) 通过$index可以访问索引，且在v-for块内可以访问的到其他属性。
<ul id="list"> ???<li v-for="item in items"> ???????{{ parentMessage }} - {{ $index }} - {{ item.message }} ???</li></ul>var vm = new Vue({ ???el: ‘#list‘, ???data: { ???????parentMessage: ‘Parent‘, ???????items: [ ???????????{message: ‘Foo‘}, ???????????{message: ‘Bar‘} ???????] ???}})为索引设置一个别名，且 1.0.17+ 之后可以使用 for of
<div v-for="(key,value) of items"></div>// 使用一层 template 包裹<template v-for="item in items"> ???<span>{{ item.id }}</span> ???<span>{{ item.content }}</span></template>对象v-for
<ul id="repeat-object" class="demo"> ???<li v-for="value in object"> ???????{{ $key }} : {{ value }} ???</li></ul><div> ?<span v-for="n in 10">{{ n }} </span></div>方法与事件处理
<div id="example"> ???<button @click="greet">Greet</button></div>let vm = new Vue({ ???el: ‘#example‘, ???data: { ???????name: ‘Vue.js‘ ???}, ???methods: { ???????greet: function(event) { ???????????alert(‘hello‘+this.name+‘!‘) ???????????console.log(event.target.tagName) ???????} ???}})<div id="example"> ???<button :click="say(‘hi‘)">Say Hi</button> ???<button :click="say(‘what‘)">Say What</button></div>new Vue({ ???el: ‘#example‘, ???methods: { ???????say: ?function(msg) { ???????????alert(msg) ???????} ???}})事件修饰符
在事件处理器中经常需要调用event.preventDefault 或 event.stopPropagation
// 阻止单击事件冒泡<a @click.stop="do"></a>// 提交事件不再重载页面<a @submit.prevent="submit"></a>// 修饰符可以串联<a @click.stop.prevent="do"></a>// 只有修饰符<form @submit.prevent></form>
按键修饰符
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">
自定义按键别名
// 可以使用 @keyup.f1Vue.directive(‘on‘).keyCodes.f1 = 112
简单易懂的 Vue.js 基础知识 ！
原文地址：https://www.cnblogs.com/Mr-Tao/p/10326305.html