一 vue概念

是一个构建用户界面的javascript框架

二 如何使用vue

1. 导入vue.js文件

2. 展示HTML

3. 建立vue对象,写JavaScript代码

  vue的简单实用:申明式渲染

Vue.js的核心是,可以采用简洁的模板语法来声明式的将数据渲染在DOM:

 <div id="app">
{{ message }}
</div>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
这就渲染了一个页面,数据和DOM被关联在一起,但是所有的数据和DOM都是响应式的。都可以通过控制台去修改。

三、模板语法

模板

    {{ msg }}  数据更新,模板变化
 <div id="box">
<input type="text" v-model="msg">
<br>
{{ msg }} // 会更新;数据更新模板变化
<br>
{{ *msg }} //不会更新;数据只绑定一次
{{{{ msg }}}} //HTML转意输出
</div>

过滤器

过滤模板数据 {{ msg|filterA|filterB }}
    系统提供了一些过滤器
{{ 'welcome'|uppercase }}  //大写
{{ 'WELCOME'|lowercase }} //小写
{{ 'welcome'|capitalize }} //首字母大写
{{ 12|currency }} ->$12.00
{{ 12|currency ¥}} ->¥12.00
四 Vue中带有v-前缀的特殊属性
    这些属性被称作指令,可以通过这些属性来操作元素
    1. v-text: 插入值;如果设置在v-text,会负责标签本身的text值
    2. v-html: 插入值和标签
    3. v-bind: 绑定元素的属性来执行相应的操作
    4. v-model:实现的数据和视图的双向绑定
    5. v-if: 根据表达式的真假值来动态的显示或隐藏元素(如果是false,会移除该dom元素)
 <h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1> 
 
    6. v-show: 功能和v-if类似,用来根据表达式的真假来动态的显示或隐藏元素(如果是false,相当于display=None)
    7. v-for: 根据变量的值来循环渲染元素
 // 遍历数组
<li v-for="(item, index) in arry">
{{ item, index }}
// 遍历对象
<li v-for="item in object">
{{ item.name }}

五 计算属性(computed)和观察者(watcher)

计算属性


        模板类的表达式非常遍历,但是设计它们的初衷是用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护
 <div id="example">
{{ message.split('').reverse().join('') }}
</div>
 
对于像这样复杂的逻辑,我们都应当使用计算属性

计算属性用法


 <div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> var vm = new Vue({
el: "#example",
data: {
message: "Hello"
},
computed: {
// 计算属性的getter
reversedMessage: function(){
// this 只想vm实例
return this.message.split('').reverse().join('')
}
}
}) //结果
Original message: "Hello"
Computed reversed message: "olleH"
这里我们申明了一个计算属性reversedMessage.我们提供的函数将作为属性vm.reversedMessage的getter函数:
 
 console.log(vm.reversedMessage)  // "olleH"
vm.message = "Goodye"
console.log(vm.reversedMessage) // "eybdooG" 

计算属性缓存和方法methods的区别


    通过methods也可以达到上面的效果
 <p>Reversed message: "{{ reversedMessage() }}"</p>
//在组件中
methods: {
reversedMessage: function(){
return this.message.split('').reverse().join('')
}
}
 
 
    我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果是完全相同的。然后,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
这也意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:
 computed: {
now: function(){
return Date.now()
}
}
 
    相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
    我们为什么需要缓存?
    假设我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算熟属性依赖于A,如果没有缓存,我们将不可避免的多次执行A的getter!如果你不希望有缓存,请用方法来替代。

计算属性和侦听属性


    Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。
    当你有一些数据需要随着其它数据变动而变动时,你很容易滥用watch,然后,通常更高的做法是使用计算属性而不是命令式的watch回调。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: "#demo",
data: {
firstName: "Foo",
lastName: "Bar",
fullName: "Foo Bar"
},
watch: {
firstName: function(val){
this.fullName = val + ' ' + this.lastName
},
lastName: function(val){
this.fullname = this.firstName + ' ' + val
}
}
})
    上面的代码是命令式且重复的。将它与计算属性的版本进行比较:
 
 var vm = new Vue({
el: "#demo",
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
}
})

计算属性的setter


        计算属性默认只有getter,不过在需要时,可以定义一个setter
 
 computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName
},
// setter
set: function(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器 watcher

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

 <div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>
 

在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

除了 watch 选项之外,还可以使用命令式的 vm.$watch API

 

六 class和style的绑定

    作用:将数据和元素的class列表,以及元素的style内联样式的操作绑定在一起。
 

与HTML的class绑定

对象语法

<div v-bind:class="{active: isActive}"></div>
 
    上述语法含义:active这个class的存在与否,取决于isActive这个data属性的值是true还是false
    此外,v-bind:class指令也可以和普通class属性共存。如下案例:
<div class="static"
v-bind:class="{active: isActive, 'text-danger': hasError}"></div>
data: {
isActive: true,
hasError: false
}
//渲染结果
<div class="static active"></div> 另外一种引用方式 <div class="static"
v-bind:clas="classObject"></div>
data: {
classObject: {
isActive: true,
hasError: false
}
}
//渲染结果
<div class="static active"></div>
 
除了上面的内联、外部引用方法外。我们还可以将class和style与某个computed属性绑定在一起,computed属性对应的getter函数需要返回一个对象,这是一种常用且强大的用法:
 <div v-bind:class="classObject"></div>​
data: {
isActive: true,
error: null
},
computed: {
classObject: function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}

数组语法

        我们可以向v-bind:class传入一个数组,来与class列表对应:
 <div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
// 渲染结果
<div class="active text-danger"></div>
 
     传入数组可以通过三元表达式来切换class列表中的某个class
<div v-bind:class="[isActive ? activeClass : '' , errorClass]"></div>
// 这里会直接添加errorClass, 但是只有在isActive值是true时,才会条件activeClass 如果需要更多判断条件,可以在数组语法中使用对象语法 <div v-bind:class="[{active: isActive}, errorClass]"></div>

与内联style绑定 v-bind:sytle

对象语法

v-bind:style的对象语法看起来非常像CSS,其实它是一个JavaScript对象。CSS属性名称可以使用驼峰式或串联式(使用串联式需要加引号)
 <div v-bind:style="{color: activeColor, fontSize: fontSize + ''px}"></div>
data: {
activeColor: 'red',
fontSize: 30
} 还可以直接与data中的style对象绑定,这样模板看起来更清晰:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: "red",
fontSizeL "13px"
}
}
 
注意:v-bind:style的对象语法,通常也会和computed属性结合使用,此computed属性所对应的getter函数需要返回一个对象

数组语法

v-bind:style的数组语法,可以在同一个元素上,使用多个style对象
 <div v-bind:style="[baseStyles, overridingStyles]"></div>

自定添加前缀

在v-bind中使用具有浏览器厂商前缀的CSS属性时(例如transform),vue会自动检测style添加合适的前缀
 

多个值

从2.3.0+起,你可以为每个style属性提供一个含有多个前缀值的数组,例如:
<div v-bind:style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>

最终,这只会从数组中找出最后一个浏览器所支持的值进行渲染。在这个实例中,对于支持无前缀版本的flexbox的浏览器,最终将渲染为display: flex.

vue基础部分的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. Dart抽象类和多态

    /* Dart中抽象类: Dart抽象类主要用于定义标准,子类可以继承抽象类,也可以实现抽象类接口. 1.抽象类通过abstract 关键字来定义 2.Dart中的抽象方法不能用abstract声明, ...

  2. std::shared_mutex和std::mutex的性能对比(banchmark)

    原文作者:@玄冬Wong 转载请注明原文出处:http://aigo.iteye.com/blog/2296462 key world: std::shared_mutex.std::mutex.pe ...

  3. [ kvm ] 学习笔记 6:virsh 命令及功能详解

    1. 虚拟机管理操作 attach-device 从XML文件附加设备 attach-disk 附加磁盘设备 attach-interface 连接网络接口 autostart 自动启动一个域 blk ...

  4. docker build时改变docker中的apt源

    # Ali apt-get source.list RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak && \ echo & ...

  5. docker中的fastdfs

    准备环节)(本文遗漏当初出现的一个问题由于是docker装的fastdfs所以tracker storage client,nginx,nginx module都在同一个容器中只需要修改配置 特别注意 ...

  6. [Google] 人和自行车匹配

    2D平面上,有m个人(P),n辆自行车(B),还有空白(O)满足以下条件1.m < n. 2.不存在两个人,到同一辆自行车距离相等, 距离用abs(x1-x2) + abs(y1-y2)定义3. ...

  7. golang 学习 (八)协程

    一: 进程.线程 和 协程 之间概念的区别:        对于 进程.线程,都是有内核进行调度,有 CPU 时间片的概念,进行 抢占式调度(有多种调度算法)    (补充: 抢占式调度与非抢占(轮询 ...

  8. Swoole练习 安装

    仅支持 Linux,FreeBSD,MacOS,3类操作系统 Linux 内核版本 2.3.32 以上 PHP-5.3.10 以上版本,包括PHP7 gcc4.4 以上版本或者clang cmake2 ...

  9. 集合运算 & 聚合函数

    SQL 查询之集合运算 & 聚合函数   1.集合运算 1.1.并集运算 UNION 1.2.差集运算 EXCEPT 1.3.交集运算 INTERSECT 1.4.集合运算小结 2.聚合函数 ...

  10. Error: python-devel conflicts with python-2.7.5-68.el7.x86_64

    yum install yum-utils -y package-cleanup --cleandupes yum -y install python-devel yum -y install pyt ...