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的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
随机推荐
- 【Java面试题】17 如何把一个逗号分隔的字符串转换为数组？ 关于String类中split方法的使用，超级详细！！！
split 方法:将一个字符串分割为子字符串,然后将结果作为字符串数组返回. stringObj.split([separator],[limit])参数:stringObj 必选项.要被分解的 ...
- jquery promise
认识jQuery的Promise 先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <scrip ...
- java (java.exe) 解释器 -D 选项
java.exe -h 其中: -D<名称>=<值> : 设置系统属性 如帮助说明的那样,该选项用于设置 java 运行时的 System.getProperty(prop ...
- 关于java之socket输入流输出流可否放在不同的线程里进行处理
2014年2月20日到叫(黑土)(人士)的公司去面试,一家新成立的公司.刚去公司是他们新聘请的猎头A来面试我的,A面试完之后是一个号称X总的年轻人来面试我,初一见此人有点邋遢,穿着西装. X:&quo ...
- 第三章 Spring.Net 环境准备和搭建
在前面一章我们介绍了依赖注入,控制反转的概念.接下来我们来真正动手搭建一下Spring.Net的环境,看一下Spring.Net 中的控制反转和依赖注入是什么样子. 3.1 Spring.Net 下 ...
- ionic调用数据接口（post、解决 payload 问题）
$http({method:'POST', url:apiUrl, headers:{'Content-Type': 'application/x-www-form-urlencoded; chars ...
- 在map中一个key中存多个值
一说到map都想到key-value键值队存在.key可以为最多一个null的key. 今天开发中一个业务需求,在map中一个key中存多个对象. 我首先想到Map<String,List> ...
- Dubbo注册中心Zookeeper安装步骤
第一步:安装jdk 第二步:上传zookeeper至Linux 第三步:解压zookeeper安装包(/soft目录是我在根目录下建立的一个用户存放上传安装包的目录),解压命令tar -xvf /so ...
- /var/log/spooler
/var/log/spooler 用来记录 Linux 新闻群组方面的日志,内容一般是空的,没什么用,了解即可
- jQuery中如何解决多库冲突问题
方法一:使用noConflict():舍弃$,$用jQuery代替jQuery.noConflict(); 方法二:自定义变量:舍弃$,新定义一个$y变量来代替$var $y = jQuery.noC ...