vue笔记
学习vue3.0必须要有html、css、js、vue2.0的基础
VUE基本介绍
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue模式： MVVM -M：model数据 -V： view视图 -VM：视图数据连接处
引入vue：
基本结构：
<div id="id"></div>
<script>
//createApp:表示这里创建了一个Vue应用（组件） 唯一
//component:创建一个普通的Vue组件
//在任何一个组件中都可以包含data、template等元素
Vue.createApp({
data(){
return{
}
},
methods:{
},
template:``
}).mount('#id');//mount 挂载
</script>
或者 给该代码块起名，进行引用 const 组件名=Vue 组件名.mount("");
<script>
const app= Vue.createApp({
data(){
return{
}
},
methods:{
},
template:``
});
app.mount('#id');//mount 挂载
</script>
//创建子组件： 子组件的代码块要放在循运行挂载之前
//app对象，创建一个子组件
app,component('mingzi',{//组件名加代码块 '名字',{} <mingzi></mingzi>
//若是子组件想保存父级组件的值可以在子组件下创建一个属性，起一个名字 props:['名字'] 然后在父组件中 v-bind:cont="父组件属性变量"
props:['cont']
temponent:`
`
});
子组件实例
<body>
<div id="mydiv"></div>
</body>
<script>
const app= Vue.createApp({
data(){
return{
name:'zhangsan'
}
},
template:`
<p>{{name}}</p>
<item-span></item-span>
`
});
//在app应用下创建了一个子组件
app.component('item-span',{
template:`
<span>aaa</span>
`
});
//vm等同于Vue应用的根组件
const vm= app.mount('#mydiv');
</script>
保存变量
data(){
return{
//字符串用单引号，数字直接写
num:'123',
...
}
},
使用变量：:{{变量名}} {{}} 插值表达式
初始化执行 挂载
在Vue创建时自动执行
mounted(){
console.log('这是我在控制台输出内容！')
},
元素/标签
//单行内容用单引号，多行用`` 实例1
template:'<div>放入一个{{num}}</div>'
//实例2
template:`
<div>
放入一个{{num}}
</div>
`
循环调用
//循环调用 setinterval(循环内容，间隔时间) 单位 毫秒
//this代表整个vue的对象，使用时也可以代表其中所有的子类标签
setInterval(()=>{
// this.num+=1;
this.$data.num+=1;
},1000)
方法
在此代码块中插入调用方法
methods:{
}
vue绑定
在属性前加上v-bind:
实例：v-bind:title
<input type="text" v-model="inputVal"><button v-on:click="add" v-bind:title="inputVal">添加</button>
小案例 字符顺序反转
Vue.createApp({
data(){
return{
con:'helloVue'
}
},
//方法
methods:{
zhuan(){
// split('')分割 reverse()反转 join('')合并
this.con=this.con.split('').reverse().join('');
}
},
template:`
<div>
{{con}}
<button v-on:click="zhuan">反转</button>
</div>
`
}).mount("#mydiv");
小案例 显示/隐藏
Vue.createApp({
data(){
return{
con:'helloVue',
show:true
}
},
mounted(){
},
//方法
methods:{
fan(){
this.show=!this.show;
}
},
template:`
<div>
<span v-if="show">{{con}}</span><br/>
<button v-on:click="fan">显示/隐藏</button>
</div>
`
}).mount("#mydiv");
常用语法标签
-
v-show() 通过判断true/false显示隐藏
-
v-if="" //判断true/false
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
(1)、v-if和v-show用于视图层进行条件判断视图展示
(2)、v-if的原理是根据判断条件来动态的进行增删DOM元素，v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能，由此我们可以得出结论：
当项目程序不是很大的时候，v-if和v-show都可以用来进行判断展示和隐藏（这种场景使用v-if只是影响不大，并不是没有影响）；
(3)、只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断
-
v-on:click="" // 点击事件 v-on 可以写作@
-
v-for="(item,index) of list" //item 为当前遍历中显示的值 , index为下标id, list 为被遍历的数组名
-
v-model="" // 获取变量值并赋值 双向绑定
-
v-bind: // 后面跟html标签，表示征用，被征用的标签可以执行vue代码 v-bind可以写作 :
-
v-blur: //失去焦点事件
-
v-html: //将vue代码变成html代码
-
v-once 使使用该语法的标签内的vue值只显示第一次的值，不会受到之后的改变的影响
-
插值表达式 {{变量名}} 在插值表达式中可以加入表达式 'a'+'b' 、Math.max(1,3) 变量值 但不能出现js语句，比如判断语句
-
this.list.forEach(function(//小括号里放循环对象){
//this.list 指向当前该页面内的变量数组 进行forEach循环
})
-
if(item.checked){} //对象被点击时,执行大括号内的方法
-
this.list.puch() //给当前页面内的list对象添加 puch 在最后一位添加 unshift 在添加到第一位
-
const 声明值 //在data(){}外 vue 内声明时
生命周期：
Vue.createApp({ options }).mount(el); 初始化 事件、生命周期
-
beforeCreate 在Vue实例生成之前会自动执行的函数 beforeCreate(){} 初始化 注入、响应性
-
created //在Vue实例生成之后会自动执行的函数 created(){} 是否有“template”选项？ true：编译模板至渲染函数 false：编译el的innerHTML至模板
-
beforeMount //在组件内容被渲染到页面之前自动执行的函数 beforeMount(){} 创建 app.$el 并添加至 el
-
mounted 挂载函数：在组件内容被渲染到页面之后自动执行的函数 mounted(){} 已挂载 .... 当数据发生 变化时
-
beforeUpdate 当data中的数据发生变化时，会自动执行的函数 beforeUpdate(){} 虚拟 DOM 重新渲染和更新
-
updated 当data中的数据发生变化时，同时页面完成更新后，会自动执行的函数 updated(){} .... 当调用了app.unmount()//取消挂载(销毁)
-
beforeUnmount 当Vue应用失效时，自动执行的函数 beforeUnmount(){} 已卸载(已销毁)
-
unmounted 当Vue应用失效时，且document完全销毁后，自动执行的函数 unmounted(){}
浙公网安备 33010602011771号