- 数据驱动编程，不做DOM操作
- 响应性: 必须事先在data里定义好
- 响应特性的特例：
- vm.fruits.length
- vm.fruits[0] = ‘111’ // debug: vm.$forceUpdate()，解决办法可以采用数组的一些方法如split(0,1)
- vm.obj.y = 200 // 给对象新增属性，得不到响应 debug: vm.$set(vm.obj, ‘y’, 200) or Vue.set(vm.obj, ‘y’, 300)
- BUG原因：Object.defineProperty()，不能监测数组的变化
- vm.$set(vm.fruits, 0, ‘🍉’)
<!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>getting-started</title><script src="../vue.js"></script>
</head>
<body><div id="root"><div><!-- <input type="text" v-bind:value="task"v-on:input="handleInput"> --><input type="text"v-model="task"="handleKeyUp"></div><!-- 插值表达式 --><!-- {{ title }} --><ul><li v-for="(task, index) of tasks">{{task}} <button v-on:click="handleClick(index)">X</button></li></ul></div><script>// 实例化Vue, optionsnew Vue({el: "#root", // root节点data: { // 数据源title: 'hello world!!',task: '',tasks: ['吃饭','睡觉','打豆豆']},methods: { // 方法// handleInput(e) {// this.task = e.target.value// }handleKeyUp() {// 操作taskthis.tasks.push(this.task)this.task = ''},handleClick(index) {this.tasks.splice(index, 1)}},})</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue instance</title><script src="../vue.js"></script>
</head>
<body><div id="root">{{title}}- <!-- {{obj.x}} --><ul><li v-for="o,key in obj">{{key}} - {{o}}</li></ul><ul><li v-for="f in fruits">{{f}}</li></ul></div><div id="app">{{msg}}</div><script&fig.productionTip = falsevar vm = new Vue({el: '#root',data: {title: '',fruits: ['🍒'],obj: {x: 100}}})vm.title = 'hello'var vm2 = new Vue({el: '#app',data: {msg: 'line 1'}})</script>
</body>
</html>
v-bind:aaa => :aaa
on:click=“handler” => @:click=“handler”;
watch:检测数据的变化才会执行。监听器，监听数据（data）的变化，做一件事。特别适合异步操作的场景
computed:计算函数依赖的值变化才会调用，有返回值若数据a=0，在下面又赋值a=0，则watch里的检测函数不执行
methds:模板渲染的值改变时会调用，事件处理函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>computed,methods,watch</title><script src="../vue.js"></script>
</head>
<body><div id="root"><!-- {{gender === 0 ? '女' : '男'}} -->{{title}}计算属性：{{filterGender}}方法：{{genGender()}}watch: {{newGender}}<div><my-component :title="title"></my-component></div></div><script&fig.productionTip = falseVueponent('my-component', {props: ['title'],data() {return {newTitle: ''}},template: `<h1>{{title}} {{newTitle}}</h1>`,updated() {console.log(wTitle = this.title + '!!!' + new Date().getTime() + Math.random()},watch: {title(){wTitle = this.title + '!!!' + new Date().getTime()}}})var vm = new Vue({el: '#root',data: {title: 'hello world',gender: 0,extra: '人',newGender: ''},// 计算属性computed: {// getter函数// 根据依赖自动返回新的值，这个值可以是响应式的// 根据依赖缓存：依赖的值不发生变化，技术属性（函数）不调用// 计算属性一定要有返回值filterGender() {// console.log('filterGender')// const result = await fetch('./data.json')// .then(response => response.json())// .then(result => {// return result.data// })return (der === 1 ? '男' : '女') + a}},// 方法// 1、事件的处理函数 2、代码的封装methods: {genGender() {// console.log('genGender')// return (der === 1 ? '男' : '女') + a}},// 监听器// 1、监听数据（data）的变化，做一件事// 2、特别适合异步操作的场景watch: {// gender(newValue) {// wGender = (der === 1 ? '男' : '女') + a// }gender: {handler(newValue) {console.log(0)fetch('./data.json').then(response => response.json()).then(result => {wGender = (der === 1 ? '男' : '女') + a + result.data})},immediate: true}},mounted() {// setTimeout(() => {// der = 0// }, 2000)// setTimeout(() => {// a = '孩'// }, 3000)// this.title = 'world&#der = 0this.title = '~~~'},})</script>
</body>
</html>
本文发布于:2024-01-30 15:41:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170660046321064.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
