vue指令问题
挂载点:最外层标签就是vue实例的挂载点,即id或者类对应的
dom节点
模板:指挂载点内部的内容,在实例里使用template标签来构
建
h1标签放在body里面不使用 “template”是一样的效果;
{{msg}}:插值表达式
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',
data:{
msg:"world" ,
content:"this is content"
}
})
指令:v-text 会转义即会将标签名原样输出
v-html 不会转义,即只会输出标签内的内容不会输出
标签
v-on:click = @click
核心:对数据进行操作,数据改变了页面内容也就随着一起改变
数据决定页面的显示,页面无法左右数据的内容
属性绑定:
模板指令
v-bind:title="title" == :title="title"
<div v-bind:title="title"></div>
<input />
外部的content内容:<div>{{content}}</div>
<input :value="content"/>表示输入框的值就是
content的值,实现了单向数据绑定
但是输入框的值改变时外部的content并没有跟着一起改变。
<input v-modal="content"/>模板指令:当输入框的值
改变时,外部的contnet会跟着一起改变,实现了数据双向绑定
<input v-modal="firstName"/>
<input v-modal="lastName"/>
<div>{{fullName}}</div>
计算属性:当firstName的值没有改变且lastName值也没有改
变时,fullName会使用之前的计算缓存的结果输出,当依赖的
属性lastName或firstName其中一个值改变时 fullName才能改
变
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性:
fullName:function(){
return this.firstName+''+this.lastName
},
watch:{//侦听器
fullName:function(){
this.count++
}
}
}
});
指令:
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
//表示要循环的列表是list:循环后放在item中,每次item的
值不同,:key="index"可以换成:key="item"。
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}</li>
</ul>
<button @click="change"></button>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
change:function(){
this.show=!this.show;//控制显示或隐藏
}
}
});
v-if 指令实现的效果是显示或者隐藏,但是实质是当show值
为false时,整个被操作的标签完全删除,当show值为true时
,被操作的整个div又重新生成并显示出来
v-show:指令:也是实现了显示或隐藏,但是
当show值为false时,被操作的标签元素会自动加上一个属性
:display:none。
v-for:指令:当有数据需要循环展示时:就使用该指令输出
vue指令问题的更多相关文章
- Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- vue指令总结(二)
一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...
- vue指令与$nextTick 操作DOM的不同之处
异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...
- vue指令概览
原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...
- vue 指令中el 的 parentNode 为空的问题
在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...
- vue指令用法
vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- vue指令大全~~~
是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...
随机推荐
- Microsoft SQL - 查询与更新
查询与更新(Query & Update) 转义引号 SQL语句中字符串只能使用单引号,如果需要转义,可用单引号转义单引号. 查询(Inquire) 以下公式中的c指代列名. 规则 1.查询语 ...
- OVS-----CentOS7上搭建基于Open vSwitch的VxLAN隧道实验
一.关于VXLAN VXLAN 是 Virtual eXtensible LANs 的缩写,它是对 VLAN 的一个扩展,是非常新的一个 tunnel 技术,在Open vSwitch中应用也非常多. ...
- android PopupWindow 显示问题
设置可点击,其余控件也可点击,等操作 setOutsideTouchable(true); setBackgroundDrawable(new BitmapDrawable()); setTouc ...
- python set 使用
创建集合set python set类是在python的sets模块中,大家现在使用的python2.7.x中,不需要导入sets模块可以直接创建集合.>>>set('boy')se ...
- Linker Scripts3--简单的链接脚本命令1
1.前言 这个部分我们描述了简单的链接脚本命令 2.设置entry point 程序中第一条运行的指令被称为入口点entry point,可以使用ENTRY链接脚本命令设置entry point,参数 ...
- React的Element的创建和render
React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容. 在React中构建 Element 有两种方式: 1.JSX的方式,JSX不是React ...
- windows命令行获取时间
在写Windows批处理脚本时,常常需要获取系统日期.时间戳记,用作文件名.文件夹名.log等等. 本文介绍了如何获取自订的系统日期.时间戳记. 首先,在Windows中,系统日期由以下参数获得: % ...
- Linux内核的整体架构简介
1. 前言 本文是“Linux内核分析”系列文章的第一篇,会以内核的核心功能为出发点,描述Linux内核的整体架构,以及架构之下主要的软件子系统.之后,会介绍Linux内核源文件的目录结构,并和各个软 ...
- 在operator =中要处理“自我赋值”
防止自我赋值很有必要 Widget w; w = w; a[i] = a[j]; //a[i]和a[j]实际上指向同一个元素 *pi = *pj; //pi和pj实际上指向同一个元素 自我赋值的危害: ...
- 转-C语言中.h和.c文件解析
C语言中.h和.c文件解析(很精彩) 简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词 ...