根 vue 实例

let viewModel = new Vue({
// 包含数据、模板、挂载元素、方法、生命周期钩子等选项
})

Hello Wrold 

<!-- 这是我们的 View -->
<div id="app">
Hello {{ name }}!
</div>
// 这是我们的 Model
var model = {
name: 'Vue.js'
} // 创建一个 Vue 实例或 "viewModel"
// 它连接 View 与 Model
var 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.f1

Vue.directive('on').keyCodes.f1 = 112

简单易懂的 Vue.js 基础知识 !的更多相关文章

  1. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  2. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  3. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  4. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  5. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  6. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  7. vue.js基础知识篇(1):简介、数据绑定

    目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

  8. Vue.js 基础知识

    0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...

  9. Vue.js基础知识

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

随机推荐

  1. tp 内置压缩文件zip

    一.解压缩zip文件 $zip = new ZipArchive;//新建一个ZipArchive的对象 /* 通过ZipArchive的对象处理zip文件 $zip->open这个方法的参数表 ...

  2. oracle中实现某个用户truncate 其它用户下的表

    oracle文档中对truncate权限的要求是需要某表在当前登录的用户下,或者当前登录的用户有drop any table的权限. 但是如果不满足第一个条件的情况下,要让某用户满足第二个条件就导致权 ...

  3. 宝岛探险,DFS&BFS

    问题描述: 小哼通过秘密方法得到一张不完整的钓鱼岛航拍地图.钓鱼岛由一个主岛和一些附属岛屿组成,小哼决定去钓鱼岛探险.下面这个10*10的二维矩阵就是钓鱼岛的航拍地图.图中数字表示海拔,0表示海洋,1 ...

  4. Kubernetes持久化存储1——示例

    目录贴:Kubernetes学习系列 一.简介 存储管理与计算管理是两个不同的问题.Persistent Volume子系统,对存储的供应和使用做了抽象,以API形式提供给管理员和用户使用.要完成这一 ...

  5. 记账本微信小程序开发四

    学习添加组件 集成日期组件 添加组件 需要在main.js文件中,声明一个data值date与wxml中的{{date}}绑定关联,然后在onLoad中初始化字符串格式的日期值, 处理日期组件点击确认 ...

  6. nodejs笔记之搭建服务器

    简单服务器搭建: 1.新建一个文件:app.js 2.加入实现服务器代码: const http = require("http"); http.createServer(func ...

  7. Bootstrap日期插件在线使用,引入即可

      引入部分 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script& ...

  8. RabbitMQ详解(三)------RabbitMQ的五种模式

    RabbitMQ详解(三)------RabbitMQ的五种模式 1.简单队列(模式) 上一篇文章末尾的实例给出的代码就是简单模式. 一个生产者对应一个消费者!!! pom.xml ​ 必须导入Rab ...

  9. JSOIWC2019游记

    世除我WC...都去广二了qaq,就我还在nj ycs至少也去了pkuwc啊 这个JSOIWC2019的内容看起来很水,进入条件简单,但窝啥都不会,肯定垫底 内容清单: 1.26 上午听机房dalao ...

  10. ubuntu16.04安装wordpress

    ubuntu16.04安装wordpress和centos7安装wordpress存在一定的差异. 当然共性大于差异. 共性是lamp环境. wordpress的必备环境. 先共性再差异. 一.搭建l ...