Vue的定义
他是一个渐进式的js的框架,可以用来开发任意的前端web应用
vue 的语法
1. 引入vue.js核心文件
2. const {createApp} = Vue;
3. const vm = createApp({
data(){
//定义属性
return {
key:val
}
}
})
4.在html中定义一个根节点
<div id="app">
//这里是Vue的语法范围
{{ 数据}}
</div>
vue两大核心概念
- 声明式渲染,只要定义在data的数据,发生变化,页面会自动更新
- 组件化开发
- 页面结构的解耦
- 组件的重复使用
<div id="app">
<p @click="addCount">{{count}}</p>
</div>
-----------------------
const {createApp} = Vue;
const vm = createApp({
data(){//定义属性
count:0
},
methods:{//定义方法
vm.count++
}
}).mount('#app')
console.log(vm)
vue的渲染过程
首先将数据渲染成虚拟dom(描述真实dom结构的js对象),当数据发生变化时,生成新的虚拟dom,然后新旧虚拟dom进行比较,只更新变化的dom部分,极大地节省了浏览器的性能
vue3 的两种api
- 选项式api(options api)和vue2区别不大
- 组合式api 使用setup 语法糖进行开发
const { createApp, ref } = Vue;
const vm = createApp({
// 该语法不建议这么写
setup() {
// 该位置就可以写组合式的语法了
const count = ref(100)
const addCount = () => {
console.log(count);
count.value++
}
return {
count,
addCount
}
}
}).mount('#app')
插值表达式
- vue中插值表达式 用来解析vue的data的中定义的数据{{}}
- 语法:可以支持js的任意数据类型,支持运算符,表达式,js的函数,不支持BOM提供的函数
