vue核心基础
Vue核心
介绍
Vue是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
无论是简单还是复杂的界面，Vue 都可以胜任。
特性
- 声明式渲染和组件系统是Vue的核心库
- Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统，
自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
创建一个vue3应用
1.引入vue库 CDN在线引入或者npm i vue
2. Vue类对象
创建vue实例对象
//相当于vue的模板，准备好一个容器;<div id="app"><h1>{{message}}</h1></div>const app = Vue.createApp({data() { //data用于存储数据，值写成对象return {message:'helloworld'}}，}) app.mount('#app')
- data: 数据对象 --初始化数据(页面可以访问)；变量，可以在里面写对象、字符串、数值、数组；data函数形式：****保证一个vue实例对象应用一个数据对象 (组件是深入)，
- mount：挂载应用—应用实例必须在调用了 .mount() 方法后才会渲染出来。让vue实例与html元素关联；该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串；当使用mount挂载app节点后，节点及内部的所有元素成为vue模板
- {{变量}} 模板插值语法 ，能使用vue实例所有的属性与方法 变量来自于data选项定义的数据；变量可以是表达式，三目 ;vue模板里的模板插值只能去实例对象里寻找属性，不能拿到window里的
如：点击就不会出现alert()
Vue模板语法有两大类
插值语法
指令语法
常用指令
指令 (Directives) 是带有 v- 前缀的特殊属性
vue.js的指令是以v-开头的，它们作用于HTML元素，
指令提供了一些特殊的特性，将指令绑定在元素上时，
指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
1. 文本类指令
v-html指令v-text指令 v-pre指令 所有vue模板语法会被保留按照原样直接显示；即包裹什么就显示什么；常用与显示原始双大括号标签及内容注：v-html指令 标签会作为html元素渲染出来
解决html指令存在的xss漏洞问题
- 使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss函数
- 在编译前会将我们从vue-loader传入的compilerOptions.directives和baseOptions.directives进行了合并。 这样我们就能覆盖html指令。
2. 操作属性v-bind指令: 属于单向绑定
用于绑定标签属性；简写 ：href=“xxx” ; 可以直接读取data所有属性
什么是attribute?html标签的预定义和自定义属性我们统称为attribute
3. 表单处理v-model指令 属于双向绑定
v-model只能应用在表单类元素上(输入类元素：input 单选多选 select下拉框 多行输入，因为它们都有value值)
<h2 v-model:x="name">不能这么使用</h2>
表单数据操作 ----data选项数据 < - > input表单数据 表单双向数据绑定
实现 input输入框内容更改 data选项数据自动更新，负责监听用户的输入事件以更新数据
表单 、 及 元素上创建双向数据绑定
文本类型的 和 元素会绑定 value， property 并侦听 input 事件；
和 会绑定 checked（布尔类型值）， property 并侦听 change 事件；
会绑定 value ，property 并侦听 change 事件；
原生：
1. 获取input输入框数据
- 监听input事件或change事件
- 获取输入框内容
event.target.value
2. 赋值给inputValue
vue:
<div id="app">//1、绑定input事件，获取输入值，赋值给message，message值绑定在value属性上，message变化，输入框值变化<input type="text" v-model="message"> {{message}}</div><script src="../day1/lib/vue.global.js"></script><script>const {createApp} = VuecreateApp({data() {return {inputValue: 'rose',message:''};},}).mount('#app')</script>
我们也可以将多个复选框绑定到同一个数组或集合的值
<div id="app"><!-- 获取多个复选框值 --><input type="checkbox" id="jack" value="Jack" v-model="checkedNames" /><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames" /><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /><label for="mike">Mike</label><p>{{checkedNames}}</p></div><script src="../day1/lib/vue.global.js"></script><script>const { createApp } = VuecreateApp({data() {return {inputValue: '',checked: false,checkedNames:[]}},methods: {},}).mount('#app')</script>
data的两种写法
3. 操作样式:class和:style
Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
Class 与 Style 如何动态绑定样式?
可以通过对象语法和数组语法进行动态绑定
4. 操作事件v-on简写@
v-on指令 - 绑定事件
vue选项参数 - methods 定义事件处理方法
5. 条件显示指令v-if和v-show
v-show 与 v-if 有什么区别？
<div id="app"><p v-if="online == 0">在线</p><p v-else-if="online == 1">离线</p><p v-else>隐身</p><!-- v-show 隐身 --><h2 v-show="isShow">v-show指令</h2></div><script src="../lib/vue.global.js"></script><script>const { createApp } = VuecreateApp({data() {return {online: 8,isShow:false}},}).mount('#app')</script>
6. 循环指令v-for
<div id="app"><!-- index是数组的下标 --><p v-for="item in list">{{item}}</p><p v-for="(item,index) in list">{{item}} - {{index}}</p></div><script src="../day1/lib/vue.global.js"></script><script>const { createApp } = VuecreateApp({data() {return {list:['javascript','css','html','vue']}},}).mount('#app')</script>
8. v-for与v-if合用
vue示例中的this
- this就是当前实例化出来的vue对象(vue实例)
- vue构造函数内部解析时会把data、methods等中的值直接设置给这个实例化出来的vue实例对象
- 最终直接通过这个vue实例对象即可访问data中的属性以及methods中的方法等
示例-vue实现通过this可以操作data选项中的数据和methods选项中的方法
vue框架监听data选项中的数据，只要数据变化，自动异步更新界面
<body><div id="app"><p>{{count}}</p><button @click="plus">加一</button><button @click="minus">减一</button></div><script src="../lib/vue.global.js"></script><script>//创建vue实例const { createApp } = Vueconst app = createApp({//定义数据data() {return {count:0,title:'vue中 this关键字'}},// 定义方法methods: {plus() {console.log('plus方法',this.title)this.count++// this.minus()},minus(){console.log('minus方法');this.count--}},})app.mount('#app')</script></body>
vue框架响应式原理—数据劫持
每次更改数据，通过getter,setter拦截，通知watcher触发更新。
1、 Object.defineProperty（）实现
<div id="app"><p></p><button onclick="onPlus()">加一</button><button onclick="onMinus()">减一</button></div><script>let data = {message: 'hello',count: 0,}const divELe = document.querySelector('#app>p')divELe.innerHTML = data.count// 将data数据 通过Object.defineProperty方法转变成具有getter和setter方法的新对象,// 新对象数据变化，自动getter和setter方法,// 数据劫持let vm = {}for (const key in data) {Object.defineProperty(vm, key, {get() {return data[key]},set(newValue) {data[key] = newValuedivELe.innerHTML = newValue //更新界面},})}function onPlus() {vm.count = vm.count + 1}function onMinus() {vm.count = vm.count - 1}</script></body>
2、 Proxy代理实现
加一 减一
