本文详细介绍了Vue.js中的v-bind、v-on的缩写及回调函数，讲解了计算属性的get和set用法，并展示了如何使用class和style进行样式绑定。此外，还涵盖了v-if/v-show的条件渲染、v-for的列表渲染、变更方法、事件处理（包括事件修饰符）以及表单数据的双向绑定。最后，文章探讨了Vue对象的生命周期、过渡动画、过滤器、访问子组件实例、v-cloak以及自定义指令的创建。通过实例代码，帮助读者深入理解Vue.js的核心概念和技术实践。
vue扩展插件
v-bind：绑定属性 缩写：
v-on：绑定事件监听 缩写：@
回调函数
1.我写的 2.我没有调用 3.但他最终执行了
1.什么时候调用 2.用来做什么的
computed计算属性
什么时候执行：初始化显示、相关的data数据发生改变时
在页面中使用{{方法名}}来显示计算的结果
计算属性高级
通过get和set来实现对属性数据的显示和监听
计算属性存在缓存 多次读取只计算一个get的值
computed: {
fullname1() {
return this.firstName + ' ' + this.lastName;
},
fullname3: {
//回调函数 当需要读取当前属性的值时回调 根据相关的数据计算并返回当前属性的值
get() {
return this.firstName + ' ' + this.lastName;
},
//回调函数，监听当前属性值的变化，当当前属性值变化时，更新相关的属性数据
set(value) { //value值是当前fullname3的最新属性值
const name = value.split(' ');
console.log(name);
this.firstName = name[0];
this.lastName = name[1];
}
}
},
用class和style强制绑定样式
1.class绑定 :class="xxx "
xxx是字符串 xxx是对象（其值是布尔值） xxx是对象
<div id="demo">
<h2>:class绑定 xxx是字符串</h2>
<p :class='a'>xxx是字符</p>
<!-- a是一个变量不可直接写死 -->
<p :class='{aClass:isA,bClass:isB}'>xxx是对象</p>
<!-- xxx是以对象来表达，其值为布尔值 -->
<p :class="['cClass','bClass']">xxx是数组</p>
<button @click='update'>按钮</button>
<h2>2.style绑定</h2>
<p :style="{color:cor,background:bg}">style来绑定样式</p>
<!-- 用对象来表示 -->
</div>
data: {
a: 'aClass',
isA: true,
isB: false,
cor: 'green',
bg: 'pink'
},
2.style绑定 ：以对象来传值
style来绑定样式
条件渲染
1.v-if和v-else
传的变量是布尔值
2v-show 也是传布尔值 适合频繁的切换
<div class="demo">
<p v-if='ok'>成功了</p>
<p v-else>失败了</p>
<p v-show='ok'>表白成功</p>
<p v-show='!ok'>表白失败</p>
<button @click='ok=!ok'>按钮</button>
</div>
<script src="../vue/vue.js"></script>
<script>
new Vue({
el: '.demo',
data: {
ok: false
}
})
</script>
列表渲染 v-for
1.v-for遍历数组:
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。-
- v-for遍历对象：
value为键值，name为键名
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
<body> <div id="demo"> <h2>测试：v-for遍历数组</h2> <ul> <li v-for="(p,index) in persons" :key='index'> {{index}}--{{p.name}}--{{p.age}} -- <button @click='updateP(index)'>删除</button> -- <button @click="delP(index,{name:'cat',age:20})">更新</button> </li> </ul> <h2>测试：v-for遍历对象</h2> <ul> <li v-for="(value,name) in persons[1]" :key="name"> {{name}}-{{value}} </li> </ul> </div> <script src="../vue/vue.js"></script> <script> //vue本身只监视了persons的改变，没有监视数据内部的改变 //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，在更新页面） new Vue({ el: "#demo", data: { persons: [{ name: 'jack', age: 18 }, { name: 'rose', age: 19 }, { name: 'Tom', age: 17 }, { name: 'jerry', age: 16 }, ] }, methods: { updateP(index) { this.persons.splice(index, 1); }, delP(index, newP) { this.persons.splice(index, 1, newP); //splice可以实现增删除 } } }) </script> </body>变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: ‘Baz’ })。**event∗∗vue中点击事件或者是其他的事件可以通过在事件中添加event** vue中点击事件或者是其他的事件可以通过在事件中添加event∗∗vue中点击事件或者是其他的事件可以通过在事件中添加event进行对标签元素的dom获取或者修改标签指的属性等等
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>监听事件
<button @click="test(123,$event)">事件监听</button>事件修饰符
在事件处理程序中调用 event.preventDefault() /阻止事件的默认行为/ 或 event.stopPropagation() /阻止事件冒泡/ 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 例如阻止a链接的跳转--> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>按键修饰符
<input v-on:keyup.enter="submit">为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112表单数据自动收集
<span>性别:</span> <input type="radio" v-model="sex" value="女"> <label for="female">女</label> <input type="radio" v-model="sex" value="男"> <label for="male">男</label><br>在input里面给定value值，当勾选的时候会将value的值双向绑定给sex
插:箭头函数
箭头函数（）=> ：[箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this]Vue对象的生命周期
1.初始化显示
beforeCreated()
created()
beforeMount()
mounted() //用的比较多
2.更新状态
beforeUpdate()
updated()
3.销毁vm实例，vm.$destory（）
beforeDestory（）
destory（）过渡和动画
在需要动画的标签外面包裹transition标签 并命名
v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 fade-enter。
同时定义css样式 1.指定过渡样式 2.opacity（透明度）/其他<transition name="fade"> <p v-if="show">hello</p> </transition> <!--定义css样式 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; }-->过滤器filter
1.全局过滤器 Vue.filter(‘名字’，function（）{ })<!-- 在双花括号中 --> {{ message | capitalize }} Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })访问子组件实例或子元素 ref
<input type='text'value='按钮' ref='btn'> <!-- 通过this.$refs.btn 来获取 <input>这个dom-->v-cloak
这个指令和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak]:属性选择器[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>自定义指令directive
<div id="demo1"> <p v-upper-text='msg1'></p> <p v-lower-text='msg1'></p> </div> <div id="demo2"> <p v-upper-text='msg2'></p> <p v-lower-text='msg2'></p> </div> <script src="../vue/vue.js"></script> <script> //全局指令 指令名字不带v- //el是挂在的标签 binding包含指令相关信息数据的对象 Vue.directive('upper-text', function(el, binding) { console.log(binding); el.textContent = binding.value.toUpperCase() }) new Vue({ el: "#demo1", data: { msg1: 'NBA That Is ', }, }) new Vue({ el: "#demo2", data: { msg2: 'Just Do It' }, //局部指令 directives: { //只在demo2中发挥作用 'lower-case' (el, binding) { el.textContent = binding.value.toLowerCase() } } }) </script>使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ // ...组件选项 })
扫一扫
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
