vue（基础一）_基本指令的使用
一、前言
1、基本骨架
2、插值表达式{{ }}
3、vue起的作用，在开发中充当的角色MVVM
4、基本指令
二、基础内容
1、基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<!--1.引用包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">
//2.创建实例化对象
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
template:'<div>{{msg}}</div>'
})
</script>
</body>
</html>
注意：如果实例中有template加载template中的内容，没有的时候再加载#app模板中的内容
2、插值表达式{{ }}
{{表达式}}中可以包含如下几个类型
-对象：注意{{ {} }}第二个括号后面有空格
<div>{{ {name:"jack"} }}</div>
-字符串
<div>{{'hello'}}</div>
-布尔值：{{true}}可以是判断后的
<div>{{isTrue}}</div>
-三元表达式
{{1>2? '真的':'假的'}}
-加减乘除
<div>{{1*9}}</div>
-api操作
<div>{{msg.split(' ').reverse().join('')}}</div>
3、vue起的作用，在开发中充当的角色MVC
声明式开发：按照语法做一些声明的定义，不需要了解过程
命令式开发：jquery写法，需要获取dom, 监听， 添加事件和方法。所有的事情都需要自己做。
4、基本指令
（1）v-text: 添加的是innerText
（2）v-html: 加的是innerHtml
<p v-text="msg"></p>
<p v-text="1+1"></p>
<p v-text="msg2"></p>
<p v-html="msg2"></p> new Vue({
el:'#app',
data:{
msg:'hello1 vue',
isTrue:1==1,
msg2:'<h1>指令</h2>'
},
template:''
})
（3）v-if 数据属性对应的值，如果为假 则不渲染，为真渲染（这个通过添加和销毁元素）
（4）v-show: 控制dom元素的显示隐藏 display:none|block
注意：v-if是“真正”的条件渲染，因为它会确保在切换过程中条件的事件监听和子组件适当地被销毁和重建
v-if的初始条件如果一开始为假，则页面不会渲染，直到遇到条件为真时，才开始渲染
v-show:不管初始条件是什么都会渲染，只是切换css中display
v-if:就会有更高的切换开销，
比如登录保存适合v-if, 页面的tab切换适合用v-show
<p v-if="true">{{msg}}</p>
<p v-show="false">{{msg}}</p>
（5）v-bind:绑定属性，可以绑定任何标签属性，也可以绑定自定义属性，缩写：“：”
<div class="box" v-bind:class="{active:true}"></div>
<div class="box" v-bind:aa="text"></div>
new Vue({
el:'#app',
data:{
msg:'hello1 vue',
isTrue:1==1,
msg2:'<h1>指令</h2>',
isGreen:false,
text:'你好'
},
template:''
})
（6）v-on:绑定事件，缩写：“@”
<button v-on:click="show()">按钮</button>
new Vue({
el:'#app',
data:{ text:'你好'
},
template:'', methods:{
show(){
console.log(this.text);
}
}
})
（7）v-for遍历：可以遍历对象，也可以遍历数组
遍历数组：
<ul>
<li v-for="(item, index) in list">
<h1>{{item.id}}</h1>
<p>{{item.name}}</p>
</li>
</ul>
new Vue({
el:'#app',
data:{
list:[
{id:1, name:'vue'},
{id:2, name:'javascript'},
{id:3, name:'node'}
]
},
template:'',
methods:{
show(){
console.log(this.text);
}
}
})
遍历对象：
<ul>
<li v-for="(value, key) in objlist">
{{key}}==={{value}}
</li> </ul> new Vue({
el:'#app',
data:{
list:[
{id:1, name:'vue'},
{id:2, name:'javascript'},
{id:3, name:'node'} ],
objlist:{
id:1,
name:"小绿"
}
},
template:'',
}）
注意：还可以进行条件遍历：需要在computed中过滤
//filterAddress 是有computed重新过滤的数组
<li v-for="(item,index) of filterAddress" >
<dl>
<dt>{{item.userName}}</dt>
<dd class="address">{{item.streetName}}</dd>
<dd class="tel">{{item.tel}}</dd>
</dl>
</li> //vue（{}）中定义
computed函数过滤 computed:{
filterAddress: function(){
//只返回数组从0-3的数据
return this.addresslist.slice(0,3);
}
},
（8）v-model:数据的双向绑定：一般用于表单上
<div id="app">
<input type="text" name="" v-model='msg'>
<h3>{{msg}}</h3>
</div> //2.创建实例化对象
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
template:'', })
双向数据绑定说明
三、总结
vue（基础一）_基本指令的使用的更多相关文章
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- Vue(基础八)_导航守卫（组件内的守卫）
一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter() ...
- Vue(基础六)_嵌套路由（续）
一.前言 1.路由嵌套里面的公共路由 2.keep-alive路由缓存 3.导航守卫 二.主要内容 ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
- Vue(基础三)_监听器与计算属性
一.前言 本文主要涉及: 1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...
- vue(基础二)_组件，过滤器，具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- redis基础一_常用指令
# Redis configuration file example. # # Note that in order to read the configuration file, Redis mus ...
随机推荐
- DBC格式解析（数据部分）
dbc格式说明:DBC Format 实战: 我们先来看一段数据 BO_ VOLTAGE01: BMS2 SG_ V01 : |@+ () [|] "" Vector__XXX ...
- web跨域请求
第一种情况: 1. sina.com=====>baidu.com/xxx.jsp 也就是前面的域名不相同,(url第三根斜杠之前的内容,也就是主机) 2:localhost =====> ...
- <resultMap>中 <collection>的使用
public class Question implements Serializable { private int id; //问题Id private int accountId; //用户id ...
- .NET提供了三种后台输出js的方式：
.NET提供了三种后台输出js的方式: 首先创建 js文件testjs.js { Page.ClientScript.RegisterClientScriptInclude("keys ...
- Educational Codeforces Round 60 Div. 2
F:考虑对于每个字母对求出删掉哪些字符集会造成字符串不合法,只要考虑相邻出现的该字母对即可,显然这可以在O(np2)(或小常数O(np3))内求出.然后再对每个字符集判断是否能通过一步删除转移而来即可 ...
- 欧拉筛法模板&&P3383 【模板】线性筛素数
我们先来看欧拉筛法 •为什么叫欧拉筛呢?这可能是跟欧拉有关 •但是为什么叫线性筛呢?因为它的复杂度是线性的,也就是O(n),我们直接来看代码 #include<cstdio> #inc ...
- 洛谷P1107[BJWC2008]雷涛的小猫题解
题目 这个题可以说是一个很基础偏中等的\(DP\)了,很像\(NOIpD1T2\)的难度,所以这个题是很好想的. 简化题意 可以先简化一下题意,这个题由于从上面向下调和从下向上爬都是一样的,所以我们就 ...
- IDEA修改module的名字
首先右键module名,选择[Refactor]-[Rename...] 然后选择[Rename module] 只修改这些对于当前开发是没有问题了 但是刚开始把module添加成maven项目的时候 ...
- MT【261】左准线
设双曲线$x^2-\dfrac{y^2}{3}=1$的左右焦点为$F_1,F_2$, 直线$l$ 过$F_2$且与双曲线交于$A,B$两点.若$l$的斜率存在,且$(\overrightarrow{F ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...