（给达达前端加星标，提升前端技能）
Vue所提供的一些相对高级的特性，表单操作，自定义指令，计算属性，过滤器，侦听器，生命周期。
表单操作的作用，用于用户的交互，通过表单来进行数据的交互。
基于Vue的表单操作，input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">form div {height: 40px;line-height: 40px;}form div span:first-child{display: inline-block;width: 100px;}</style></head><body><div id="app"><form><div><span>姓名：</span><span><input type="text"></span></div><div><span>性别：</span><span><input type="radio" id="male"><label for="male">男</label><input type="radio" id="female"><label for="female">女</label></span></div><div><span>爱好：</span><input type="checkbox" id="ball"><label for="ball">篮球</label><input type="checkbox" id="sing"><label for="sing">唱歌</label><input type="checkbox" id="code"><label for="code">写代码</label></div><div><span>工作</span><select><option>请选择工作</option><option>教师</option><option>老师</option></select></div><div><span>个人简介</span><textarea></textarea></div></form></div><script type="text/javascript" src="js/vue.js"></script>
表单操作，双向数据绑定v-model。表单修饰符，number转化为数值，trim去掉开头和结尾的空格，lazy将input事件切换change事件
<input v-model.number="phone" type="number">
自定义指令，为何有自定义指令，就是内置指令不满足需要。
如何自定义指令
Vue.directive('focus' {inserted: function(el){// 获取元素的焦点el.focus();}
})如何使用<input type="text" v-focus>
钩子函数，一个指令定义对象可以提供以下函数。
bind只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置，inserted被绑定元素插入父节点时调用，update所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前，
componentUpdated指令所在组件的VNode以及其子VNode全部更新后调用，unbind只调用一次，指令与元素解绑时调用。
自定义指令的用法
<input type="text" v-color="msgColor">// 自定义指令
Vue.directive('color', {bind: function(el, binding) {el.style.backgroundColor = lor;}
});
var vm = new Vue({el: '#app',data: {msg: {color: 'red'}},methods: {handle: function() {}}
}
局部指令
directives: {focus: {// 指令的定义inserted: function(el) {el.focus()}}
}
局部指令的示例：
directives: {color: {bind: function(el, binding) {el.style.backgroundColor = lor;}}
}
局部指令只能在本组件中使用，局部指令的应用范围是有限制的。
计算属性，为什么需要计算属性呢，表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁。
如何使用计算属性呢？
computed: {msgDa: function() {return this.msg.split('').reverse().join('')}
}<div>{{msgDa}}</div>
// 直接调用函数名
计算属性和方法的区别
方法是不存在缓存的，计算属性是基于它们的依赖进行缓存的。只要值不变就不重新计算。方法不存在缓存的机制。
比较耗时的计算可以节省性能，同样的结果没有比较计算两次，用了两次，只执行一次，缓存的问题，计算属性计算的结果缓存起来了，再次访问，就访问计算后的结果。
<div> {{msgDa}} </div>
<div> {{msgDa}} </div>computed: {msgDa: function() {console.log('只会打印一次');return this.msg.split('').reserse().join('');}
}
方法
methods: {msgDa: function() {console.log('ddd');return this.msg.split('').reverse().join('');}
}<div>{{msgDa()}}</div>
侦听器，是用来侦听数据的变化，数据一旦发生变化就会通知侦听器所绑定的方法，侦听器绑定方法，数据变化时执行异步或开销较大的操作。计算属性只能用于一些简单的操作。
使用方法
watch: {firstName: function(val) {// val表示变化之后的值this.fullName = val + this.lastName;},lastName: function(val) {this.fullName = this.firstName + val; }
}
验证用户名的例子，通过v-model实现数据绑定，需要提供提示信息，需要侦听器监听输入信息的变化。采用侦听器监听用户名的变化，调用后台接口进行验证，根据验证的结果调整提示信息，需要修改触发的事件。
表单域的修饰符
<input type="text" v-model.lazy="uname">
Vue中的数据渲染
{{}}
<div id="app">{{ message }}</div>var vm = new Vue({el: '#app',data:{message:"达达前端"}
})
v-html是可以解读html标签渲染
<div id="app" v-html='message'><input type="text"/><div >{{ message }}</div></div>var vm = new Vue({el: '#app',data:{message:"<div style='background:red;width:60px;height:60px'></div>"}
})
v-text
v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。
<div id="app">{{ message }}</div>var app = new Vue({el : '#app',data : {message : 'hello world' }
})
过滤器，什么是过滤器，它的作用是什么呢？
用来格式化数据，比如把字符串格式变为大写，将日期格式变化为指定的格式等。
自定义过滤器
Vue.filter('过滤器名称', function(value) {// 过滤器业务逻辑
})// 过滤器的使用
<div> {{msg | upper}} </div>
Vue.filter('upper', function(val) {return val.chatAt(0).toUpperCase() + val.slice(1);
})
局部过滤器
filters: {capitalize；function() {}
}
Vue.filter('format', function(value, arg1){
})使用
<div>{{date | format('yyyy-MM-dd')}}</div>
日期格式，y表示年，M表示年中的月份1-12，d表示月份中的天1-31，h表示小时0-23，m表示分0-59，s表示秒0-59等。
指令是用来操作dom，什么是组件，组件是html css js等的一个聚合体。组件化，可以加速项目的进度，可以在项目中复用，将一个完整功能的一部分可以多处使用。
Vueponent的主要功能是注册组件，不是创建组件。
所有的 Vue.js 组件都是被扩展的 Vue 实例，使用Vueponent注册组件时，创建Vue实例必须在注册组件的代码的后面，否则注册的组件不会被显示。
注册：
<div id="app"><Father></Father><gd-da></gd-da></div>
</body>
<script>Vueponent('Father',{template: '<div> 这里是全局注册 </div>'})new Vue({el: '#app',components: {'GdDa': {template: '<div> 这里是局部注册 </div>'}}})
</script>
template
类型：string
说明：
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。
CDN引入
<script src=".js"></script>
NPM安装
npm install vue
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之Helloworld</title><!--引入Vue库--><script src=".js"></script>
</head>
<body><!--创建一个Div--><div id="app"><!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->{{message}}</div><!--创建Vue的对象--><script type="text/javascript">var app=new Vue({ // 创建Vue对象。Vue的核心对象。el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器data:{ // Vue对象中绑定的数据message:'hello Vue!' // 自定义的数据}})
</script>
</body>
</html>
输出结果：
hello Vue!
<div v-if="isLogin">你好</div>
<div v-else>请登录后操作</div>
<div v-show="isLogin">你好</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
v-if与v-show的区别
v-if：开销较高，在运行时条件很少改变时使用。
v-show：开销较小，在常频繁地切换时使用。
<!-- 模板 -->
<div id="app"><ul><li v-for="item in items">{{item}}</li></ul>
</div><!--JS代码 -->
<script type="text/javascript">var app=new Vue({el:'#app',data:{items:[1,2,3,4]}})
</script>
对象遍历
<!-- 模板 -->
<div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} - {{ value }}</li></ul>
</div><!--JS代码 -->
<script type="text/javascript">var app=new Vue({el:'#app',data:{object: {firstName: 'da',lastName: 'dada'}}})
</script>
v-text，{{xxx}}取值有个弊端
当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个
v-html
用于输出html代码
<span v-html="msgHtml"></span>
阶段一：创建和挂载
beforecreated：el 和 data 并未初始化
created：完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
阶段二：更新
beforeUpdate：虚拟DOM中根据data变化去更新html
updated：将虚拟DOM更新完成的HTML更新到页面中
阶段三：销毁
beforeDestroy：销毁之前调用
destroyed：销毁之后调用，之后再执行ssage= ‘hello vue’，页面不会同步更新。
推荐阅读 点击标题可跳转
【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await
【面试需要-Vue全家桶】一文带你看透Vue前端路由
【面试需要】掌握JavaScript中的this，call，apply的原理
2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文
觉得本文对你有帮助？请分享给更多人
关注「达达前端」加星标，提升前端技能
在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。
非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞，求关注，求分享，对暖男我来说真的
非常有用！！！
感谢阅读，原创不易，喜欢就点个[在看] or [转发朋友圈]，这是我写作最大的动力。
意见反馈
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
这是一个有质量，有态度的公众号
点关注，有好运
好文章，我在看❤️
本文发布于:2024-02-02 11:39:47，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684518443554.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
