vue 学习 渲染、v-指令
vue渲染
在组件中data是一个方法里面的值要是一个对象return出去
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程"
};
}
};
如果是new的事例 data就是一个对象
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
组件例子:
1.使用 {{}} 文本插值符
f1 <template>
<div class="hello">
<div>{{msg}}</div>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程"
};
}
};
</script> 效果:
// v-text v-html 区别
<template>
<div class="hello">
<span v-text="word1">11</span>
<span v-html="word2">11</span>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
word1: " <div>安稳1</div> ",
word2: "<div>安稳2</div> "
};
}
};
</script> 效果:
总结: v-html解析html 两个都会覆盖标签内容 {{}}不会覆盖 {{}}和v-text都不解析html内容
vue指令
2.v-bind
改指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。 v-bind可以简写 :
<template>
<div class="hello">
<span v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程"
};
}
};
</script> 鼠标悬浮效果:
3.v-if 指令
绑定一个布尔值 true是显示 false隐藏
<template>
<div class="hello">
<span v-if="active">{{msg}}</span>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程",
active: true
};
}
};
</script>
4.v-for
注意点:
1.需要加key值 -通过key值来提升渲染的效率默认用 “就地复用” 策略
2.v-for
v-for="(item,index) in items" 第一参数item是每一项的数组元素 第二参数index是当前项的索引 (和angularjs 相反 )
也可以用of代替in作为分隔符,也是最接近javascript迭代器的语法。 这时候每一项的意义有一些不一样v-for="(item,key,index) of items"
第一参数item元素 第二参数key为键名 第三个参数index 为索引
<template>
<div class="hello">
<span v-for="(item,index) in msg" :key="index">{{item.a}}</span>
// <span v-for="item in msg">{{item.a}}</span> 注意这种写法不会影响效果,但是编辑器语法会报错出现红色波浪线 记得加上key值
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: [{ a: 1 }, { a: 2 }, { a: 3 }]
};
}
};
</script> 效果:
5.v-on
事件绑定可以cy()也可以cy直接绑定 加括号传参数 v-on可以简写@
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
}) 以上我们直接写死的点击事件 也可以使用动态参数作为事件名绑定处理函数
<div id="app-5">
<button v-on:[eventname]="reverseMessage">动态事件名</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
eventname:'focus'
},
methods: {
reverseMessage: function () {
。。。。。。
}
}
})
当 值为'focus' v-on:[enentname]等价 v-on:focus 包括(v-bind 和 v-on 的动态参数 )
动态事件参数注意点:
1.非字符串类型都会触发警告
2.语法约束空格引号无效并且回避大小写
3.计算属性复杂的表达式也会无效
例:
<a v-bind:['foo' + bar]="value"> ... </a> //触发警告
<a v-bind:[someAttr]="value"> ... </a> //流浪器特效强制转小写
这个是官网的事例:我看到了一个reverse()的方法 以前没用过所以做一下记录~
var vm = new Vue({
date:{
message="abcdefg"
}
)}
//split(' ')分裂,也就是把一个数据拆分
message.split(' ') == [ "a", "b", "c", "d", "e", "f", "g"]
//reverse( )翻转,把数据反过来 !只对数组有效
message.split(' ').reverse() == ['g', "f", "e".......]
//join(' ')重组,把数组合成一个字符串
//把数据反过来重组
message.split(' ').reverse( ).join(' ')
6.v-model
<template>
<div class="hello">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
</template> <script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 双向绑定"
};
}
};
</script>
v-model的修饰符,一起记录一下
(1) .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新**
vue 学习 渲染、v-指令的更多相关文章
- vue学习04 v-on指令
vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...
- vue学习06 v-show指令
目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...
- vue学习08 v-bind指令
目录 vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名,可简写为:属性名 练习代码为: 运行效果为: vue学习08 v-bind指令 v-bi ...
- VUE 学习笔记 一 指令
1.声明式渲染 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性 <div id='app'> <span v-bind:title=" ...
- vue 学习八 自定义指令
vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { conso ...
- vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏
//html <div id="app"> <input type="button" value="toggle" @cl ...
- vue学习(三) v-bind指令
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- 17.VUE学习之- v-for指令的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习03 v-html
vue学习03v-html v-html指令的作用是:设置元素的内部html链接 内容有html 的结构会被解析为标签 v-text指令无论内容是什么,只会解析文本 解析文本使用v-text,需要解析 ...
随机推荐
- Spring Boot 2.X(十二):定时任务
简介 定时任务是后端开发中常见的需求,主要应用场景有定期数据报表.定时消息通知.异步的后台业务逻辑处理.日志分析处理.垃圾数据清理.定时更新缓存等等. Spring Boot 集成了一整套的定时任务工 ...
- 数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优.但是一些"不好"的SQL也会导致数据库查询变慢,影响业务流程.本文从SQL角度进行数据库优化,提升SQ ...
- Java基础(十九)集合(1)集合中主要接口和实现类
1.Java集合框架为不同类型的集合定义了大量接口 其中,集合有两个基本接口:Collection和Map. 2.各接口的主要特征如下 (1)Collection接口:是List接口.Set接口和Qu ...
- itextsharp生成pdf
itextsharp在ios中可用,亲测 (一)生成文档 Document document = , , , ), , , , ); //Document document = new Documen ...
- Pythonyu语法入门01
引子 基于上一篇所学,有了计算机硬件,再在硬件之上安装好操作系统,我们就有了一个应用程序的运行平台,我们接下来的任务就是学习如何使用某款编程语言来开发应用程序. 本篇的主题是先带大家了解下编程 ...
- 致Java星球程序员兄弟们的一封信
致Java星球程序员兄弟们的一封信 亲爱的Java星球的程序员兄弟们: 你们好!我是来自地球的一名Java程序员,首先我代表地球人对贵星球的高司令来到地球传授Java语言,造福了全人类,造福了整个地球 ...
- springboot(3)——配置文件和自动配置原理详细讲解
原文地址 目录 概述 1. 配置文件作用 2.配置文件位置 3.配置文件的定义 3.1如果是定义普通变量(数字 字符串 布尔) 3.2如果是定义对象.Map 3.3如果是定义数组 4.配置文件的使用 ...
- MVC5异步提交表单疑难杂症
//此处必须添加,不然不能执行异步回调OnAddPortSuccess方法 <script src="~/scripts/jquery.unobtrusive-ajax.min.js& ...
- [Python]python面向对象 __new__方法及单例设计
__new__ 方法 使用 类名() 创建对象时,Python 的解释器 首先 会 调用 __new__ 方法为对象 分配空间 __new__ 是一个 由 object 基类提供的 内置的静态方法,主 ...
- 复制/etc/profile至/tmp/目录,用查找替换命令删除/tmp/profile文件中的 行首的空白字符及在vim中设置tab缩进为4个字符
1.复制/etc/profile至/tmp/目录,用查找替换命令删除/tmp/profile文件中的 行首的空白字符 在命令模式下,使用正则表达式匹配 行首有空白字符行的模式:^[[:space:]] ...