![](https://img-blog.csdnimg.cn/838019cb7a764db49cb961e83618cfb9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue2.0+Vue3.0学习
iqzn.
Java小白
展开
-
9.props配置
//简单声明接收props:['name','age','sex']//接收的同时对数据类型进行限制props:{ name:String, age:Number, sex:String}//接收的同时对数据类型进行限制props:{ name:{ type:String,//name的类型是字符串 required:true,//name是必要的 }, age:{ type:Number, default:99,//默认值 }, sex:{ type:S原创 2022-03-25 12:26:41 · 916 阅读 · 1 评论 -
8.Vue的生命周期
Vue的生命周期是什么?命名:生命周期回调函数、生命周期函数、生命周期钩子。是Vue在关健时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字(mounted)不可更改,但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象。常用的生命周期钩子:1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等...原创 2022-03-22 12:59:19 · 780 阅读 · 0 评论 -
7.Vue内置指令
v-bind:单向绑定解析表达式,可简写为:xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染(动态控制节点是否存存在)v-else:条件渲染(动态控制节点是否存存在)v-show:条件渲染(动态控制节点是否展示)v-text:向其所在的节点中渲染文本内容,与插值语法的区别: v-text会替换掉节点中的内容,{{xx}}则不会。v-html:向指定节点中渲染包含html结构的内容,在网站上动态渲染任意HTML是非常危险.原创 2022-03-21 13:35:53 · 999 阅读 · 0 评论 -
6.v-for 列表渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&原创 2022-03-19 12:17:22 · 150 阅读 · 0 评论 -
5.watch和computed对比
computed和lwatch之间的区别:1.computed能完成的功能,watch都可以完成。2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。两个重要的小原则:1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或组件实例对象.2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。但是在进行某些实际操作时,computed原创 2022-03-18 15:34:36 · 523 阅读 · 0 评论 -
4.计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&原创 2022-03-18 11:48:25 · 54 阅读 · 0 评论 -
3.v-on 事件绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&原创 2022-03-17 14:30:16 · 104 阅读 · 0 评论 -
3.v-model双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&原创 2022-03-17 12:45:47 · 326 阅读 · 0 评论 -
2.指令语法v-bind
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="app"&g原创 2022-03-17 12:26:44 · 53 阅读 · 0 评论 -
1.Hello小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&原创 2022-03-16 20:43:38 · 50 阅读 · 0 评论