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 ...
随机推荐
- 各个版本spring的jar包以及源码下载地址，目前最高版本到spring4.3.8，留存备用：
http://maven.springframework.org/release/org/springframework/spring/
- hdu1839（最小生成树）
题意:字面意思: 思路:就是多了一个前提,有些点之间可能有边,有两个处理方法,一个是有边的,这条边权值归零,另一个是,先一次循环用并查集过一遍: 代码:(用的是第一种方法) #include<i ...
- Vuex以及axios
Vuex 简介 vuex是一个专门为Vue.js设计的集中式状态管理架构. 状态? 我们把它理解为在data中需要共享给其他组件使用的部分. Vuex和单纯的全局对象有以下不同: 1.Vuex 的状态 ...
- P1282 多米诺骨牌 dp
思路:dp[i][j] 的j是上半段的和的值 这里表示的是达到上半段值是j的最小次数 答案在最小的可达到的j #include<bits/stdc++.h> using namespa ...
- Codeforces986C AND Graph 【位运算】【dfs】
题目大意: 一张$ m $个编号互异点图,最大不超过$ 2^n $,若两个编号位与为0则连边,问连通块数量. 题目分析: 考虑怎样的两个点会连边.这种说法对于A和B两个点来说,就相当于B在A的0的子集 ...
- Docker容器安装
使用脚本安装 Docker 1.使用 sudo 或 root 权限登录 Centos. 2.确保 yum 包更新到最新. $ sudo yum update 3.执行 Docker 安装脚本. $ c ...
- [LightOJ1038] Race to 1 Again
传送门:>出错啦< 题意:给你一个整数n,每一次可以随机选择一个n的因子x(包括1和它自己),让n除以x——不停重复此过程,直到n==1. 问n被除到1的期望次数. 解题思路: 今天刚学的 ...
- python_getpass 模块的使用
可以实现输入用户密码的时候隐藏输入显示.更加安全. 默认自带Password: 的提示 如果自己指定提示内容就用自己的替换默认 import getpass passwd = getpass.getp ...
- python学习日记（文件操作练习题）
登录注册(三次机会) name = input('请注册姓名:') password = input('请注册密码:') with open('log',mode='w',encoding='utf- ...
- Hdoj 1785.You Are All Excellent 题解
Problem Description 本次集训队共有30多人参加,毫无疑问,你们都是很优秀的,但是由于参赛名额有限,只能选拔部分队员参加省赛.从学校的角度,总是希望选拔出最优秀的18人组成6支队伍来 ...