vue基础---介绍
(1)声明式渲染
Vue.js 的核心是采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
①文本
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
现在已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message
的值,你将看到上例相应地更新。
②属性
除了文本插值,还可以像这样来绑定元素特性:
<div id="app" v-bind:title="message">
{{info}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
info:"将鼠标悬停上来查看效果",
message: '现在时间是'+new Date().toLocaleString()
}
})
</script>
这里的 v-bind
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。
它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。
如果再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息'
,就会再一次看到这个绑定了 title
特性的 HTML 已经进行了更新。
.
(2)条件与循环
①条件指令:控制切换元素是否插入/显隐
<div id="app" v-bind:title="message" v-if="seen">
{{info}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
info:"将鼠标悬停上来查看效果",
message: '现在时间是'+new Date().toLocaleString(),
seen:true
}
})
</script>
继续在控制台输入 app3.seen = false
,会发现之前显示的消息消失了。
这个例子演示了不仅可以把数据绑定到 DOM 文本或属性,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
②循环指令:v-for
指令可以绑定数组的数据来渲染一个项目列表
<ul id="list">
<li v-for="book in books">
{{book.name}}
</li>
</ul>
var list = new Vue({
el:"#list",
data:{
books:[
{name:"一年级语文"},
{name:"二年级语文"},
{name:"三年级语文"},
{name:"四年级语文"},
{name:"五年级语文"},
{name:"六年级语文"}
]
}
})
在控制台里,输入 app4.todos.push({ text: '新项目' })
,你会发现列表最后添加了一个新项目。
(3)处理用户输入
①事件监听器:v-on
指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法
<div id="app" v-bind:title="message" v-if="seen">
{{info}}
<button v-on:click="changeInfo">按钮</button>
</div>
var app = new Vue({
el: '#app',
data: {
info:"将鼠标悬停上来查看效果",
message: '现在时间是'+new Date().toLocaleString(),
seen:true
},
methods:{
changeInfo:function(){
this.info = "我是修改后的显示信息info",
this.message = "我是修改后的鼠标悬停提示信息"
}
}
})
注意在 changeInfo方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,编写的代码只需要关注逻辑层面即可。
②双向绑定:v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app" v-bind:title="message" v-if="seen">
<input type="text" name="user_name" v-model:value="user_name">
<p style="color: red;">
{{user_name}}
</p>
</div>
var app = new Vue({
el: '#app',
data: {
info:"将鼠标悬停上来查看效果",
message: '现在时间是'+new Date().toLocaleString(),
seen:true,
user_name:""
},
methods:{
promptInfo:function(){
this.info = "我是修改后的显示信息info",
this.message = "我是修改后的鼠标悬停提示信息"
}
}
})
(4)组件化应用构建
在Vue中,一个组件就是拥有预定义选项的vue实例。注册组件
// 注册组件:定义名为 todo-item 的新组件
Vue.component('todo-item',{
template:'<li>这是个待办项</li>'
});
构建组件模板
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义,使之能够接受一个 prop:
Vue.component('todo-item', {
// todo-item 组件现在接受一个"prop",类似于一个自定义特性。 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
接下来可以使用 v-bind
指令将待办项传到循环输出的每个组件中:
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,之后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
}) var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
.
vue基础---介绍的更多相关文章
- vue 基础介绍
0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 1.基础示例 代码: <!DOCTYPE html&g ...
- vue基础介绍及使用
1.vue基本使用 vm:el / data v:v-model / {{ }} 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面 ...
- Vue.js介绍
http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
随机推荐
- Credit Risk Scorecards Credit Risk Modeling 评分卡 KS AR
https://cn.mathworks.com/help/finance/creditscorecard.validatemodel.html?requestedDomain=www.mathwor ...
- CSP 201612-3 权限查询 【模拟+STL】
201612-3 试题名称: 权限查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 授权 (authorization) 是各类业务系统不可缺少的组成部分,系统用户通过授权 ...
- APDU命令的结构和处理【转】
本文转载自:http://blog.csdn.net/yonghenzhita/article/details/36402525 版权声明:本文为博主原创文章,未经博主允许不得转载. 简单说,IFD( ...
- python 两个文件夹里的文件名对比
比如需要一个xml对应一个jpg时,有时候会不小心少了其中一个文件,这时可以用以下代码比较缺少的是哪个文件: # -*- coding: utf-8 -*- import os path1 = r'. ...
- gerrit下载
http://central.maven.org/maven2/com/google/gerrit/gerrit-war/2.11.4/
- 10.9NOIP模拟题
/* big模拟 细节不少 remove表示这个玩意儿在这一秒有没有移动 注意在一秒内所有小葱一起移动,所以如果一个一个处理 别忘了“错位”这种情况 */ #include<iostream&g ...
- NetCore Netty 框架 BT.Netty.RPC 系列随讲 —(前序) REST API 与 RPC 经典网络基础服务架构
在服务体系架构内,我们所知道的,有两种请求模型: Http 请求模型,以及 RPC 请求模型.因此,在一个互联网请求模型架构上,都是这两种的请求模型的向互组合. 下面给出两种常见的互联网经典基础架构图 ...
- 探寻宝藏 --- 双线DP
双线DP , 在郑轻的时候 做过 这种双线DP , 这是多维DP 应该是比较简单的 但是那个 时间复杂度的优化 始终看不懂 . 先附上代码吧 , 等看懂了再来 , 补充一下 解释 . #in ...
- S - Cyclic Components (并查集的理解)
Description You are given an undirected graph consisting of nn vertices and mm edges. Your task is t ...
- Jayway JsonPath实例
开源:https://github.com/json-path/JsonPath 引入库: <dependency> <groupId>com.jayway.jsonpath& ...