vue.js（一）
之前看过一点vue.js但是知识点没做记录，现在也差不多不记得了，今天把以前看过的翻一遍，顺便提炼一下知识点
注意：下面的所有与vue相关的标签、指令都是写在id="app"的div之内的。
1.vue对象的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div> <script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
浏览器显示：
我们在控制台输入一些命令，看他的变化：
看到这，你应该意识到，我们可以通过js来改变这个vue对象的变量值，从而改变浏览器窗口中页面内容的显示。
2.指令系统
先贴上相关指令的用法，后面会对其中部分指令作详解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p v-once>这个将不会改变: {{ message }}</p>
<p v-bind:title="message">绑定了title属性</p>
<p v-if="seen">if语句</p>
<p v-bind:id="message">绑定了id</p>
<a v-bind:href="message">绑定了href</a>
<p>输出html: <span v-html="rawHtml"></span></p>
<p>这里用computed属性实现对message值的反转：{{reversedMessage}}</p>
<p class="static" v-bind:class="{ active: isActive, textdanger: hasError }">根据对象的vaule值绑定class(内联写法)</p>
<p class="static" v-bind:class="classObject">根据对象的vaule值绑定class(Object写法)</p>
<p v-bind:style="{ color: activeColor, fontSize: fontSize }">Hello World(内联写法)</p>
<p v-bind:style="styleObject">Hello World(Object写法)</p>
<input v-model="message" placeholder="edit me">
<p>v-model实现双向数据绑定: {{ message }}</p>
<ol>
<li v-for="todo in todos">
<ol>
<li v-for="item in todo.list">
{{item.key}}
</li>
</ol>
</li>
</ol>
<button v-on:click="reverseMessage">绑定了单击事件的methods</button>
<button v-bind:disabled="seen">绑定了disabled属性</button>
</div> <script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen:true,
rawHtml:"<a style='color:red' href='##'>content</a>",
isActive:true,
hasError:false,
classObject: {
active: true,
textdanger: false
},
activeColor: 'red',
fontSize: '18px',
styleObject: {
color: 'red',
fontSize: '13px'
},
todos: [
{ name: '学习 JavaScript',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '学习 Vue' ,list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '整个牛项目',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] }
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join(''); }
},
computed: {
//默认是getter方法
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
} })
</script>
</body>
</html>
3.计算属性：computed。
上面我们可以看到，通过方法methods和计算属性computed都可以实现对数据message值的反转的操作。
但是，注意了，methods属性里面的方法不能有返回值且前台不能够直接调用，不然前台显示function () { [native code] }
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('');
}
},
前台调用：
<p>这里用methods属性实现对message值的反转：{{reverseMessage}}</p>
前台显示：
所以，一般methods方法用来处理事件而不是用来显示文本，对于显示文本，一般用计算属性来解决computed。像下面这样：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[]
this.lastName = names[names.length - ]
}
}
}
<p>前台调用全名：{{fullName}}</p>
<p>前台调用firstName：{{firstName}}</p>
（注意：data中只定义了firstName和lastName）
然后我们在控制器或者js中执行“setter”方法：
app.fullName="Jason Chen";
此时，data中的firstName和lastName都将发生改变，而这一切，在这里都不作记录了。。。
重点来了：
计算属性是会产生缓存的，计算属性是基于它们的依赖（在上面的例子中计算属性fullName的getter方法是依赖firstName和
lastName）进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖变量的值还没有发生
改变，多次访问fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我
们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！有了缓存之后直接获取之前getter
方法的缓存，而不用再次执行A的getter方法了。
4.true和false
就像上面看到的那样，很多时候我们需要定义一个是非值变量，来作用于if语句或者class绑定值，我发现书写时会出现三种方式
data：{
seen1:true,
seen2:'任意字符',
seen3:任意字符
}
对于第一种，vue会当做“真”值处理；对于第二种，vue也会当做“真”值处理；对于第三种，当然是。。。。。报错！
5.变量的声明
对于vue变量的声明，根据变量名里有无特殊符号要作以下处理（单引号）：
data：{
'text-content':'这里是变量的值',
textcontent:'这里也是变量的值'
}
6.v-if指令
v-if作为一个指令，必须写在一个标签上
<div v-if="seen1">
<h1>hello world</h1>
<h3>hello vue</h3>
</div> <template v-if="seen1">
<h1>hello world</h1>
<h3>hello vue</h3>
</template>
上面两者的区别就是，DOM渲染的时候，第一个会显示div标签，而第二个不会显示template标签
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B
</div>
if-else语句浅显易懂，无须多作解释。下面引入key来处理vue复用元素的做法
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
当我们动态改变loginType的值的时候，看似会出现不同的label和input，实际上并没有重新渲染DOM，
我们在第一个input输入了值之后，再切换loginType值之后，之前输入的值会出现“第二个”input之中，所以这实际上是复用了DOM元素，
在切换状态的时候，仅仅对元素内容作了修改，那么就会存在一个问题，当我们输完Username之后，切换到Email输入界面，
这里的input框由于不是重新渲染的，那么就会默认保留之前输入的Username值，那要怎么处理呢？
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
这样，每次切换时，用key标识的输入框都将被重新渲染。
v-if是惰性的，只有在条件为真时，DOM才会渲染，如果初始化的时候条件为假，DOM是不会渲染的，直到条件为真。
相对应的有个v-show指令，这个指令无论条件为真为假都会渲染DOM，只是会根据条件改变display属性的值。
vue.js（一）的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
随机推荐
- mysql驱动（github上的）
https://github.com/Eonblast/Emysql https://github.com/denglf/erlang-db-driver https://github.com/diz ...
- c++ 开放随笔
1.设计或使用类时 一定先弄清流程 了解对象直接的关系(这个必须清楚) 如多对多,一对多,一对一关系.不然弄list map set时相对麻烦. 2.map 中key是不能重复的,可以看成一个主键,定 ...
- Oracle 之 SQL 面试题 录
多上网查查 SQL 面试题 1.学号(自动编号) 姓名 性别 年龄 0001 xw 男 18 0002 mc 女 16 0003 ww 男 21 0004 xw 男 18 请写出实现如下 ...
- VC++ 使用MSSOAP访问WebService天气服务（客户端开发）
绪论 本文介绍使用VC++编程实现访问天气Web服务的简单实例(例子来源于网络). Web天气服务 http://www.webxml.com.cn/WebServices/WeatherWebSer ...
- JavaScript编码encode和decode escape和unescape
encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 URI 或其他要编码的文本. 返 ...
- JsonConvert.DeserializeAnonymousType
string JsApiTicketString = string.Empty; using (StreamReader reader = new StreamReader(response.GetR ...
- Maven------电脑安装Maven
转载: http://blog.csdn.net/jiuqiyuliang/article/details/45390313 注意:修改本地仓库路径时,<localRepository>D ...
- Effective C++ Item 16 Use the same form in corresponding uses of new and delete
1. When you created an array and want to return the memory to system. You need to explicitly add [] ...
- svn 操作字母的提示
今天使用SVN提交代码,发现提交后的代码找不到之前的版本. 操作的字母缩写为R.一般我们常见的操作为 A D M R A:add,新增 C:conflict,冲突 D:delete,删除 M:mo ...
- MySQL性能优化（四）-- MySQL explain详解
前言 MySQL中的explain命令显示了mysql如何使用索引来处理select语句以及连接表.explain显示的信息可以帮助选择更好的索引和写出更优化的查询语句. 一.格式 explain + ...