关键词：
【Vue2.0学习】— Vue监视数据的原理（四十二）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学生信息</h2>
<button @click="student.age++">年龄+1岁</button><br><br>
<button @click="addSex">添加属性默认值是男</button><br><br>
<button @click="student.sex='未知' ">修改性别</button><br><br>
<button @click="addFriend">在列表的首位添加一个朋友</button><br><br>
<button @click="updateFriend">修改第一个朋友的名字为张飒</button><br><br>
<button @click="addhobby">添加一个爱好</button><br><br>
<button @click="updatehobby">修改第一个爱好为开车</button><br><br>
<h3>姓名：student.name</h3>
<h3>年龄：student.age</h3>
<h3 v-if=" student.sex"> 性别：student.sex</h3>
<h3>爱好</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">h</li>
</ul>
<h3>学生信息</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">f.name-f.age</li>
</ul>
</div>
<script>
const vm = new Vue(
el: '#root',
data:
student:
name: '张三',
age: 18,
hobby: ['抽烟', '喝酒', '烫头'],
friends: [
name: '小王',
age: 20
,
name: '李四',
age: 22
]
,
methods:
addSex()
this.$set(this.student, 'sex', '男')
// Vue.set(this.student, 'sex', '男')
,
addFriend()
this.student.friends.unshift(
name: 'jack',
age: 26
)
,
updateFriend()
this.student.friends[0].name = '张飒'
,
addhobby()
this.student.hobby.push('打球')
,
updatehobby()
this.student.hobby.splice(0, 1, '开车')
)
</script>
</body>
</html>
vue2.0学习—收集表单数据（四十三）(代码片段)
【Vue2.0学习】—收集表单数据（四十三）v-model的三个修饰符：lazy：失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤<body><divid="root"><form@submit.prevent="demo" 查看详情
vue2.0—vue监视数据的原理(代码片段)
【Vue2.0】—Vue监视数据的原理（五）<body><divid="root"><h1>学生的基本信息</h1><button@click="student.age++">年龄+1岁</button><butt 查看详情
vue2.0学习—过滤器（四十四）(代码片段)
【Vue2.0学习】—过滤器（四十四）<divid="root"><h2>显示格式化后的时间</h2><!--计算属性实现--><h4>现在是:fmtTime</h4><!--methods实现--><h4>现在是:getTime()</h4&g 查看详情
vue2.0学习—列表排序（四十一）(代码片段)
【Vue2.0学习】—列表排序（四十一）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情
vue2.0学习—自定义指令（四十九）(代码片段)
【Vue2.0学习】—自定义指令（四十九）需求：需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦... 查看详情
vue2.0学习—v-pre指令（四十八）(代码片段)
【Vue2.0学习】—v-pre指令（四十八）v-pre指令跳过其所在节点的编译过程可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译<divid="root"><h2v-pre>Vue其实很简单</h2><h2... 查看详情
vue2.0学习—v-html指令（四十六）(代码片段)
【Vue2.0学习】—v-html指令（四十六）知识储备：cookie简略图示v-html指令：作用：向指定节点中渲染包含html结构中的内容与插值语法的区别：v-html会替换掉节点中所有的内容XX不会v-html可以识别html结构严重... 查看详情
vue2.0学习—v-cloak指令（四十七）(代码片段)
【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情
vue2.0学习—监视属性（三十五）(代码片段)
【Vue2.0学习】—监视属性（三十五）通过vm对象的$watch或watch配置来监视指定的属性当属性发生变化时，回调函数自动调用，在函数内部进行计算需求：做一个天气案例<!DOCTYPEhtml><htmllang="en">&l... 查看详情
vue2.0学习—v-text指令（四十五）(代码片段)
【Vue2.0学习】—v-text指令（四十五）v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，XX不会<divid="root"><h2>你好，name</h2><h2v-tex 查看详情
vue2.0学习—事件处理和事件修饰符（三十二）(代码片段)
【Vue2.0学习】—事件处理和事件修饰符（三十二）事件处理事件的基本使用：1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名2、事件的回调需要配置在methods对象中，最终会在vm身上3、methods中配置的函数... 查看详情
vue2.0学习—vue脚手架（五十二）(代码片段)
【Vue2.0学习】—Vue脚手架（五十二）1️⃣一个重要的内置关系：VueComponent.prototype._proto_===Vue.prototype为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性和方法2️⃣Vue脚手架第一步：&... 查看详情
vue2.0学习—vuex工作原理图（二十五）(代码片段)
【Vue2.0学习】—Vuex工作原理图（二十五）一、Vuex是什么？概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写）,也是一种... 查看详情
vue2.0学习—vuex工作原理图（二十五）(代码片段)
【Vue2.0学习】—Vuex工作原理图（二十五）一、Vuex是什么？概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写）,也是一种... 查看详情
vue2.0—vue脚手架配置代理（二十二）
【Vue2.0】—Vue脚手架配置代理（二十二）方法一方法二 查看详情
vue2.0学习—计算属性（三十四）(代码片段)
【Vue2.0学习】—计算属性（三十四）定义：要用的属性不存在，要通过已有的属性得来原理：底层借助了Object.defineproperty方法提供的getter和setterget函数什么时候执行？初次读取时会执行当依赖的数据发生变... 查看详情
unity3d学习笔记四十二：粒子特效
粒子特效粒子特效的原理是将若干粒子无规则的组合在一起。来模拟火焰，爆炸。水滴，雾气等效果。要使用粒子特效首先要创建，在hierarchy视图中点击create——particlesystem就可以粒子发射器粒子发射器是用于设定粒子的发射属... 查看详情
vue教程(四十二)路由懒加载(代码片段)
Vue教程(四十二)路由懒加载路由懒加载当打包构建应用时,Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了懒加载语法ÿ... 查看详情