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 ...
随机推荐
- CSS边框效果
前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...
- React Router 4.0 ---- 嵌套路由和动态路由
嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...
- JS 单线程和事件循环
Js 是单线程,js代码从上到下依次执行,比如我们写了两个函数,肯定是上面的函数先执行,下面的函数后执行.但是这种单线程有一个非常大的问题,那就是遇到耗时的任务,后面的任务只能等待它执行完,才能进行. ...
- Ubuntu18.04下安装Sublime Text3！
这几天安装了Ubuntu18.04,然后在里面安装Sublime Text3,结果各种问题!各种BUG!试了网上各种办法!尼玛!都是坑爹的啊! 最后还是楼主自己解决了…… 废话不多说,直接按顺序执行下 ...
- ubuntu系统安装mysql（deb-bundle包）
由于某些原因,又要在ubuntu系统中安装mysql了,之前曾经安装过好多次.都没记下来 以前一直动用源码包来安装,基于两个原因:1.一直用Python写代码.2.想使用文件来安装,而不是通过api ...
- UNIX口令破解机
在编写我们的UNIX口令破解机时,我们需要使用UNIX 计算口令hash 的crypt()算法.Python 标准库中已自带有crypt 库.要计算一个加密的UNIX 口令hash,只需调用函数cry ...
- Codeforces Round #472 Div. 1
A:某个格子被染黑说明该行和该列同时被选中,使用并查集合并,最后看每个集合中是否有未被染黑的格子即可. #include<iostream> #include<cstdio> ...
- github 快速部署
在github上 新建一个项目后,并且未提交任何代码,会有一个页面提示我们如何快速部署.在此备份一下那个页面 Quick setup — if you’ve done this kind of thi ...
- jqGrid 手册 - 搜索
搜索 类型: colModel Options Toolbar Searching Custom Searching Single field searching Advanced Searching ...
- 执行sql脚本保留操作日志
需求场景,操作数据库场景较多,无专业dba,腾讯云mysql虽然提供了类似于phpmyadmin的管理后台,但是操作卡,效率低 #!/usr/bin CDATE=`date +%Y%m%d-%H%M% ...