Vue-学习。
---恢复内容开始---
Vue.js 与 Angular.js 非常相似,只要学过了Angular.js然后在学Vue.js就非常的简单。
什么是Vue?
相比Angularjs和ReactJS,Vue.js一直以轻量级,易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来,我们不再需要在维护视图和数据的统一上花大量的时间,只需要关注于data的变化,代码变得更加容易维护。
1. 引入Vue.js
安装Vue可以通过查看官方安装教程来了解其他安装 Vue 的选项。但对webpack Node.js等打包构建工具不了解的同学不推荐直接使用vue-cli
搭建项目脚手架。
最简单的方式是在本地创建的 .html 文件中通过如下方式引入 Vue:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2. Hello World
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM
2.1文本插值实现数据绑定
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用mustache语法,在运行时{{ message }}
会被数据对象的message属性替换,所以页面上会输出"Hello World!"。
<div id="app">
{{ message }}
</div>
//这是定义视图View
new Vue({
el: '#app', //指向view 将Vue实例挂载
data: {
message: 'Hello World!';
} //指向model
})
// 用来连接 View 与 Model
2.2 输出纯HTML
使用{{message}}
的mustache语法只能将数据解释为纯文本,为了输出HTML,可以使用v-html
指令:
<div id = "app">
<div v-html="text"></div>
</div>
new Vue({
el: '#app',
data: {
text:'<h1>hello</h1>'
}
})
关于指令:
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
2.3双向数据绑定
MVVM模式本身支持双向绑定,在Vue.js中可以使用v-model
指令在表单元素上创建双向数据绑定。
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
这样无论是改变输入框的内容还是通过控制台修改message的值,另一个值都会同时被改变。
2.3 给元素的属性绑定数据
定义在Vue实例的data接口上的数据的绑定很灵活,既可以绑定在DOM节点内部,也可以绑在属性上
<div id="app" v-bind:title='message' v-bind:style='color' v-once>
<a :href='url'>{{message}}</a>
</div>
v-once
指令能够让你执行一次性的插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定。
var vm = new Vue({
el: '#app',
data:{
message: 'Google',
color: 'color:green',
url:'https://google.com'
}
})
Mustache 不能在 HTML 属性中使用,绑定数据到节点属性上时,需要使用v-bind
指令。利用这个指令将元素节点div的 title属性和 Vue 实例的 message属性绑定到一起,从而建立数据与该属性值的绑定。v-bind
指令可以缩写为一个冒号,如a标签中的v-bind:href="url"
的缩写方式:href="url"
。
<button v-bind:disabled="someDynamicCondition">Button</button>
v-bind
指令对布尔值的属性也有效 —— 如果条件被求值为 false
的话该属性会被移除。
3.条件与循环
3.1 根据条件表达式的值来执行元素的插入或者删除行为的是v-if
指令:
<div id="app">
<h1 v-if="num > 0">Num: {{ num }}</h1>
<p v-if="seen">now you see me</p>
</div>
var app = new Vue({
el: '#app',
data: {
num:12,
seen: true,
name:'WannaCry'
}
})
v-if
指令可以绑定一个属性值为布尔型的属性,当值为真时,元素将显示,反之则消失。如果在控制台设置app.seen = false
,你会发现页面上的“now you see me ”消失了。
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时自动应用过渡效果。
3.2 v-show
也是条件渲染指令,和v-if
指令不同的是,使用v-show
指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。
<h1 v-show="name.indexOf('Walker') >= 0">Name: {{ name }}</h1>
在控制台打开,可以看到<h1>Name:WannaCry</h1>
元素被设置了style="display:none"
样式。
3.3 可以用v-else
指令为v-if
添加一个“else块”。
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
</div>
v-else
元素必须立即跟在v-if
或v-else-if
元素的后面——否则它不能被识别。
var vm = new Vue({
el: '#app',
data: {
age:20,
name: 'Alan Walker',
sex: 'Man'
}
})
v-else
元素是否渲染在HTML中,取决于前面v-if
的值true
还是false
。
如果v-if
的值为false
,则后面v-else
的内容不会渲染到HTML。
3.4 数组数据循环渲染列表使用v-for
指令:
<div class="title">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
v-for
指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:v-for="todo in todos"
todos
是一个数组,todo
是当前被遍历的数组元素。
var app = new Vue({
el: '.title',
data: {
//定义todos数组
todos: [
{ text: 'study hard' },
{ text: 'find a girlfriend' },
{ text: 'around the world' }
]
}
})
页面显示如下:
- study hard
- find a girlfriend
- around the world
控制台里,输入 app.todos.push({ text: 'coding' })
,你会发现列表中新添加了一项。
4. 处理用户点击
当用户点击页面,我们可以用 v-on
指令绑定一个事件监听器,通过它调用我们在Vue 实例中定义的方法:
<div class="title">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
v-on
指令用于给监听DOM事件,它的用语法和v-bind
是类似的。
new Vue({
el: '.title',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
//split()用于将字符串转化为数组
//reverse()用于颠倒数组中元素顺序
//join()用于将数组转化为字符串
}
}
})v-on
指令可以缩写为@
符号。
---恢复内容结束---
Vue-学习。的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记(二)——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习2:模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- java泛型---通配符,泛型嵌套
package generic; import java.util.ArrayList; import java.util.List; /** * ? -->通配符,类型不确定,用于声明 变量| ...
- golang协程池
type GoroutinePoll struct { Queue chan func() error Total, Num int Result chan error FinishCallBack ...
- ID3、C4.5和CART决策树对比
ID3决策树:利用信息增益来划分节点 信息熵是度量样本集合纯度最常用的一种指标.假设样本集合D中第k类样本所占的比重为pk,那么信息熵的计算则为下面的计算方式 当这个Ent(D)的值越小,说明样本集合 ...
- facebook 摘要生成阅读笔记(二) Abstractive Sentence Summarization with Attentive Recurrent Neural Networks
整体流程与第一篇差不多,只是在encoder和decoder加入了RNN Encoder: 1. ai=xi+li ai=词向量+词在序列中的位置信息(相当于一个权重,[M, 1]) 流程: 先是CN ...
- 说说java
先说什么是java java是一种面向对象语言,真正的面向对象,任何函数和变量都以类(class)封装起来 至于什么是对象什么是类,我就不废话了 关于这两个概念的解释任何一本面向对象语言的教材里面都有 ...
- [Codeforces Round#488]Div.2
总结 这是我无聊透顶肝到三点半的一场 cf ,结果还真够无聊的 这套题涵盖了英语题,语文题,模拟题.注重考查了选手的英语素养能力,语文阅读能力和精湛的模拟和枚举能力.是不可多得的一套好题. 没什么单独 ...
- JDK动态代理[2]----JDK动态代理的底层实现之Proxy源码分析
在上一篇里为大家简单介绍了什么是代理模式?为什么要使用代理模式?并用例子演示了一下静态代理和动态代理的实现,分析了静态代理和动态代理各自的优缺点.在这一篇中笔者打算深入源码为大家剖析JDK动态代理实现 ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- python可视化基础
常用的python可视化工具包是matplotlib,seaborn是在matplotlib基础上做的进一步封装.入坑python可视化,对有些人来说如同望山跑死马,心气上早输了一节.其实学习一门新知 ...
- SpringMVC配置式开发
所谓配置式开发是指“处理器类是程序员手工定义,实现了特定接口的类,然后再在SpringMVC 配置文件中对该类进行显示的.明确的注册”的开发方式. 一.处理器映射器HandlerMapping Han ...