01-vue核心

00Object.keys()用于获取对象自身所有的属性

1.vue初识特性

Vue是一个用于 构建用户界面 的 渐进式 框架

创建Vue实例

1.准备一个容器
2.引包
3.

const vue=new Vue({
	el: 【指定的容器】
	data:{ 【数据】}
})

• el: 指定挂载点
• data ： 提供数据

1.vue工作，必须创建一个vue实例，且传入一个配置对象
2.root容器中的代码依然符合html规范，只是混入了一些特殊的vue语法
3.root容器中的代码称为【vue模板】
4.容器和实例只能一对一
5.真实开发中只有一个vue实例，且配合组件一起使用
6.{{xxx}}中xxx要写js表达式
7.区分js表达式和js代码

1. 表达式：能产生值得式子（a/a+b）
2. js代码（if/for语句）

<div id="root">
        <!-- 容器 -->
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript" >
        Vue.config.productionTip=false
        //创建vue实例
        new Vue({
            el:'#root',
            data:{
                name:'张三'
            }
        })
    </script>

1.2 vue的 响应式 特性

响应式：数据变化，视图自动更新

2.vue模板语法

1.插值语法

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式
注意： ①不能在标签中使用插值
②只能是表达式

2.指令语法

功能：用于解析标签（标签属性、绑定事件）
举例：v-bind:href=“xxx” ===> :href=“xxx” 。xxx中也是js表达式

3. 两种数据绑定方式

1.单向绑定(v-bind): 数据只能从data流向页面
2.双向绑定(v-model): 用户输入的value值影响data数据
备注：
①双向绑定用于表单元素上（input、select）
②v-model:value 可简写为v-model
，因为v-model收集的就是value值
③对于复选框来说，其value值就是true/false

4. data与el的2种写法

1.el的2种写法
（1）new vue时配置el属性 el:'#root'
（2）先创建vue实例，随后通过vue.$mount('#root')指定el的值为el:‘root’
2.data的2种写法
（1）对象式
（2）函数式

new Vue({
            el:'#root',
            // data:{
            //     name:'张三',
            // }
            data:function(){ //data(){~~~}
                return {
                name:'张三',
                }
            }
        })

组件时，data必须用函数式，不然报错

3.重要原则：
由vue管理的函数，不能用箭头函数，必须用普通函数

5. 数据代理

1.Object.defineProperty()

let obj1 = { x: 100 };
      let obj2 = { y: 200 };
      Object.defineProperty(obj2,'x',{
        get(){
            console.log('访问了obj2的x');
            return obj2.x
        },
        set(val){
            obj1.x=val
        }
      })

vm是vue的实例对象

1.vue中的数据代理：

• 通过vm对象来代理data对象中的属性的操作

2.vue中数据代理的好处：

• 更加方便的操作data中的数据

3.基本原理： 通过Object.defineProperty() 把data对象中的所有属性都加到vm上，为每一个vm属性都指定一个 getter/setter，在getter/setter内部操作 读/写 data中的属性

在容器中使用的{{name}} 实则是{{vm._data.name}}

6. 事件处理

事件的基本使用
点击事件： v-on:click => @click

6.1 vue中指令的修饰符

1.prvent 阻止默认跳转
2.stop 阻止冒泡 < 冒泡是从内到外 >
3.once 事件只触发一次
4.caputure 使用事件的捕获模式 （因为捕获->冒泡）
5.self 只有even.tartag是当前操作元素时，才触发
6.passive 事件的默认行为立即执行，无需等待事件的回调函数执行完

6.2 键盘事件

7.指令

7.1.v-show

• 作用：控制元素显示隐藏
• 语法：v-show=“表达式” — 表达式值 true 显示。false 隐藏
• 原理：display：none 控制显示隐藏
• 场景：频繁切换显示隐藏的场景

7.2.v-if

• 作用：控制元素显示隐藏（条件渲染）
• 语法：v-if=“表达式”
• 原理：基于条件判断，是否创建或移除元素节点
• 场景：不频繁切换的显示隐藏，如提示登录按钮

7.3.v-else-if 和v-else

7.4.v-on

作用：注册监听事件

简写：v-on：事件名 ➡@事件名
语法①：@click=“ count++”
语法②：@click=“fn”

const app = new Vue({
            el: '#root',
            data: {
                name: '小明',
                isShow: true
            },
            methods: {
            //methods中的函数，this指向当前实例对象
                fn() {
                    console.log(this.isShow)
                    app.isShow = !app.isShow
                }
            }
        })

v-on 参数传递

<div id="root">
  .......
        <button @click="buy(5)">可乐5元</button>
  <script>
     new Vue({
	.......
         methods: {
             buy(qian) {
                 this.money = this.money - qian
                }
            }
        })

7.5. v-bind 标签属性

作用：动态设置html的标签属性，src url title
语法：v-bind：属性名=“表达式”
简写: ：属性名=“表达式”

7.6. v-for 遍历数组

v-for 中的 key

• key作用：给元素加上唯一标识，便于Vue进行正确排序
• 注意：
  ①key的值只能是 字符串或 数字
  ②key的值 具有 唯一性 ，所以一般用 id作为key

<p v-for="(item,index) in bookList" :key="item.id">
	{{item.name}}
</p>

补充

1. 常量.trim()

if (this.toName.trim() == '') {
	return alert('输入内容不能为空')
}

在Vue中，trim是去除输入字符串两端的空白字符。

2. 数组.filter( )

filter方法 ：根据条件，保留满足条件的项，并生成一个新数组 不会覆盖原数组
常用 删除功能

3. 数组.unshift( )

向首位添加元素
常用 增加功能

4.数组.reduce()

语法：arr.reduce((sum,item)=>{return sum+item},0)