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的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
随机推荐
- socket client简单传输数据
1.整数转换为用于TCP传输的二进制 _host = "127.0.0.1" _port = 5678 _address = (_host, _port) s=socket.soc ...
- path与classpath的差别
1.path的作用 path是系统用来指定可运行文件的完整路径.即使不在path中设置JDK的路径也可运行JAVA文件,但必须把完整的路径写出来,如C:\Program Files\Java\ ...
- Oracle中查询主键、外键、sequence、表基本信息等
一次看到某张表中有几条ID相同的数据,通过业务确认该ID应该是唯一的,后来找到原因,因为DBA未对该表建主键. 现在DBA工作比较忙,我们项目有时需要新增或者修改数据库表结构时,可能需要对表结构进行确 ...
- delphi中设置listview行高的方法
第一步.在form中放置一个ImageList: 第二步.将ListView的SmallImages设置为第一步中放置的ImageList: 第三部.将imageList的height设置成自己需要的 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- mybatis由浅入深day02_4多对多查询_多对多查询总结
4 多对多查询 4.1 需求(查询用户及用户购买商品信息) 查询用户及用户购买商品信息. 4.2 sql语句 查询主表是:用户表 关联表:由于用户和商品没有直接关联,通过订单和订单明细进行关联,所以关 ...
- K - problem 问题
Leetcode 有几个题目, 分别是 2sum, 3sum(closest), 4sum 的求和问题和 single Number I II, 这些题目难点在于用最低的时间复杂度找到结果 2-sum ...
- Python 入门（九）迭代
什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration). 在Python中,迭代是通过 for ...
- PyQt4消息窗口
默认情况下,如果我们单击了窗口标题栏上的X标记,窗口就会被关闭.但是有些时候我们想要改变这一默认行为.比如,我们正在编辑的文件内容发生了变化,这时若单击X标记关闭窗口,编辑器就应当但出确认窗口. #! ...
- Anfroid 在界面中显示图片 ImageView
ImageView1.什么是ImageView是显示图片的一个控件2.ImageView属性android:src ImageView的内容颜色 android:background ImageVie ...