vue - 基础(2)
<div id="content">
{{ msg }}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#content",
data(){
//data中是一个函数，函数中return一个对象，可以是空对象，但是不能不return
return {
msg:"<h2>zhangqing</h2>"
}
}
})
</script>
v-show：相当于 style.display
v-if：相当于创建
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-bind和v-on
v-bind可以绑定标签中任何属性 简写 ：
v-on可以监听 js中所有事件 简写 @
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
} </style>
</head>
<body> <div id="app">
<!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
<!--<div class="box" v-bind:class = '{active:isActive}'></div>--> <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<img :src="imgSrc" :alt="msg">
<div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
//数据驱动视图 设计模式 MVVM Model View ViewModel //声明式的JavaScript框架 // v-bind和v-on的简便写法 : @
new Vue({
el: '#app',
data() {
//data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
return {
imgSrc:'./1.jpg',
msg:'美女',
isActive:true
}
},
methods:{
handlerChange(){
// this.isActive = !this.isActive;
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
} })
</script> </body>
</html>
on bind
v-for 遍历：可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key，避免vue计算dom
<div id="app">
<ul v-if='data.status == "ok"'>
<li v-for="(item,index) in data.users" :key="item.id">
<h3>{{ item.id }}---{{ item.name }}</h3>
</li>
</ul>
<div v-for="(value,key) in data.person" :key="index"> #遍历对象时，第一个是value，第二个是key
{{ key }} --- {{ value }}
</div>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el:"#app",
data(){
return{
data:{
status:"ok",
users:[
{id:1,name:"alex",age:18},
{id:2,name:"wusir",age:30},
{id:3,name:"yuan",age:58}
],
person:{
name:"alex"
}
}
}
}
})
</script>
v-for
watch和computed
watch可以监听单个属性，也可以监听多个,computed动态监听函数返回的数据
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click = 'clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:"alex",
age:18
} },
methods:{
clickHandler(){
this.msg = "wusir"
}
},
watch:{
//watch单个属性，如果想监听多个属性 声明多个属性的监听
'msg':function (value) { console.log(value); if (value === 'wusir'){
alert(1);
this.msg = '大武sir'
}
},
'age' :function (value) { }
}
})
</script>
</body>
</html>
watch ,computed
计算属性 computed
监听多个属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
msg: "alex",
age: 18
} },
created() {
//定时器 ajax 库 function(){}
setInterval(() => { })
},
methods: {
clickHandler() {
//this的指向就是当前对象
this.msg = "wusir";
this.age = 20;
},
clickHandler: function () {
console.log(this);
} },
computed: {
myMsg: function () {
//业务逻辑 // 计算属性默认只有getter方法
return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
}) console.log(vm);
</script>
</body>
</html>
computed
vue - 基础(2)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- [LeetCode] 875. Koko Eating Bananas 科科吃香蕉
Koko loves to eat bananas. There are N piles of bananas, the i-th pile has piles[i] bananas. The g ...
- oracle--查询速度慢
查询速度慢的原因很多,常见如下几种: 1, 没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2, I/O吞吐量小,形成了瓶颈效应. 3, 没有创建计算列导致查询不优化. 4, ...
- Django中render_to_response和render的区别（转载）
转载地址:https://www.douban.com/note/278152737/ 自django1.3开始:render()方法是render_to_response的一个崭新的快捷方式,前者会 ...
- Mysql 生成不重复的随机数字
在网上查找Mysql 生成不重复的随机数字 ,竟然没找到合适的例子. 其实思路很简单,利用MySQL现有的函数,然后进行加工处理,达到预期的结果.可以用到的MySQL函数为rand() ,以及 rou ...
- Docker 镜像/容器操作命令
一.镜像操作 1.拉取镜像 # docker pull tomcat # docker pull tomcat:8.0.21-jre8 # docker pull 192.168.220.150: ...
- HTML连载27-层叠性&优先级&！important用法
一.层叠性 1.定义:CSS处理冲突的一种能力 2.注意点:层叠性只有在多个选择器中“同一标签”,然后又设置了“相同的属性”,才会发生层叠性 3.CSS缩写:Cascading StyleSheet ...
- LInux 就该这么学 笔记分享
看了Linux就该这么学的前部分书,觉得写的还可以,就在网上找了下面这个同学写的笔记,觉得很详细,所以保存地址,供以后查阅参看.这里对作者表示感谢!!! 博客地址: https://www.cnblo ...
- 【More Effective C++ 条款4】非必要不提供default constructor
1)default constructor:在没有任何外来信息的情况下将对象初始化 2)但是有些对象如果没有外来信息,就没有办法完成初始化动作,那么这些对象,就没有必要提供default constr ...
- idea中maven项目打jar包
从Eclipse换成Idea的小伙伴们可能会找不到Eclipse中Maven项目打jar包的方法,因为eclipse只需要在工程上点击右键,右键菜单中就有Maven打包的相关选项. 然而Idea的右键 ...
- golang --strings 下常用函数api
1. func Compare(a, b string) int {} 比较返回一个按字典顺序比较两个字符串的整数.如果a == b则结果为0,如果a <b则结果为-1,如果a> b则结果 ...