2021-11-19 Vue学习笔记

原型链

尚硅谷有一个课，去截个图

VUE相关笔记

在Vue来修改dom的过程中，一个vue实例只能对应一个dom对象，一个dom对象也只能对应一个vue实例，两者是一一对应的，而且如果vue实例中没有 定义的属性，如果dom中有，控制台就会报错。注意区分js表达式和js代码.

	<div id="root">
        <h1>hhhh:{{name}}</h1>
        <h2>xx；{{age}}</h2>
        <a v-bind:href="url">点击去csdn</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //vue实例 el指定为哪个容器服务
        new Vue({
            el:'#root',
            data:{
                name:'ll' ,
                age:'12',
                url:'https://www.csdn.net/'     
            }
        })

插值语法 和 指令语法：

插值语法：
用于解析标签体内容
{{xxx}}  xxx 是js表达式

指令语法：

 v-if='seen'                从页面删除或添加元素

v-show='seen'          将页面元素display设置为none或block

v-on:***='***'             监听dom事件，缩写为@

v-bind:***='***'          响应式更新html特性，缩写为:

v-for='*** in ***'         绑定数组的数据来渲染一个项目列表 

v-onclick = @click        绑定点击事件

常见的一些指令语法：

1. v-cloak 解决页面闪烁问题

{{}} 插值表达式(并不是指令)

2. v-text 类比jQuery里头的text()

3. v-html 类比jQuery里头的html()

4. v-on: 事件名称 ==>(绑定事件)

>@click   v-on: 用@来代替

<button type="button" @click="add" >添加</button>
<input type="text" v-model="condition" placeholder="请输入搜索的内容" @keydown.13="search()">

5. v-bind:属性名称=>(绑定元素)

实现对元素的属性的绑定

原生的js：document.getElementById('id').setAttribute(属性名，属性值)
jQuery: $('#id').attr(属性名，属性值) $('#id').attr({属性1：属性值1，属性2：属性值2})
vue:
    <h1 v-bind:yibin="msg">绑定了title属性，鼠标悬浮过来看看</h1>
    缩写：v-bind:属性名  ==》 :属性名  相当于是去掉了v-bind

6. v-for 直接在html里头做数组循环

可以对数字、数组、对象等进行循环遍历

<h1 v-for="(item, index) in arr" v-text="item"></h1>
item: 表示遍历过程的每一项元素 元素可能是简单地数据类型也可能是复杂的数据类型
index: 表示遍历过程的每一项元素的下标
v-for的作用域：向内，即所有的子元素都可以共享item index arr三个变量
缩写：（即舍弃index） v-for="item in arr"
计数：
v-for="count in 100"

7. v-show 条件渲染、条件显示

v-show 条件渲染、条件显式 实现display的效果 =>v-show(false）==display:none

通常让一个元素显式、隐藏(display:none; visibility: hidden)
原生的js：style
jQuery: css
vue : v-show v-if
<h1 v-for="count in 5" v-text="count" v-show="false"></h1>

8. v-if 条件分支显式

条件分支显式 效果等同于v-show 但是性能和安全跟v-show不一样
v-else-if v-else

<h1 v-if="a < 1"> 我是小于1</h1>
<h1 v-else-if="a == 1"> 我是等于1</h1>
<h1 v-else> 我是大于1</h1>

9. v-model 数据双向绑定

绑定：
1.单向绑定: 将数据绑定到元素上 （数据与元素绑定与之的区别：在于方向，前者的方向是从数据到元素，后者是双向的，即可以从元素到数据也可以从数据到元素）
2.双向绑定：就是既可以将数据绑定到元素上，也可以将元素上的值绑定到数据上（所以双向绑定仅仅适用于表单类的标签）==>即数据改变页面元素值改变，元素值改变时数据也改变

<input v-model="formData.name" placeholder="请输入用户名">
<input type="password" v-model="formData.pwd" placeholder="请输入密码">

10. style 和 class 的绑定（不算指令）

​ 1）style==> 抽象出来：它是一个对象

 <h1 :style="{color:'red'}">style</h1>
    可以单独把{color:'red'}抽取到data里头

​ 2) class ==>抽象出来：它是一个数组array

<h1 :class="['c1','c2']">class隶书</h1>
    可以单独把['类名1','类名2']抽取出来

eg: v-if 与 v-show 的区别：

1、 v-if在false的时候连同代码都从文档流移除掉。
v-show在false的时候，元素还在，只是样式变成了display:none

2、 v-if:性能更差，安全性更高 通常用于涉密的场景
v-show:性能更优，但是安全性更低 通常用于需要频繁在显式于隐藏之间切换的场景（比如：菜单）
但是通常，v-if和v-show我们是混用的。

数据绑定:

【这里突然想到一个问题，在学习android的双向绑定的时候，考虑的问题就是数据绑定的方向，如果使用单向绑定，也就是说数据改变了，view视图就进行同步的改变，而双向绑定就是，比如说视图的控件是一些text，是可以进行输入的控件，那么视图层进行改变，我们应该同步，】

上面利用vue实例进行dom的改变，无论是使用的是插值还是指令，都是我们在vue实例中进行改变然后更新到视图层上面去，也就是单向的绑定。

<div id="root">
        <input type="text" v-bind:value="name">
        <input type="text" v-model:value="age">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        //vue实例 el指定为哪个容器服务
        new Vue({
            el:'#root',
            data:{
                name:'lyx'，
                age：'18'
            }
        })

v-bind就是单向绑定，我们只能将vue实例中的值给input，在网页上可以显示出定义的name，但是如果我们在浏览器上进行修改input的值，在浏览器的控制台上利用document.querySelector(‘input’).value 可以获取 ‘kkk22’， 但是在vue插件中并不能获取到新的值。

双向绑定 使用 v-model

可以看到是 在浏览器进行改变，同时会改变vue的实例。

不是所有的元素都可以使用v-model，只能是表单类能交互的控件可以进行双向绑定，单选框、多选框、input、select等，这些都是有value值的。

可以写为：
		<input type="text" :value="name"> v-bind： 可以写成：
        <br>
        <input type="text" v-model="age"> v-model：value 可以写成v-model

el的两种写法：

const v = new Vue({
    //el:'#root',
    data:{
        name:'lyx'，
        age：'18'
    }
})

v.$mount('#root')

data的两种写法：

data:function(){
	return {
	 	name:'lyx'，
        age：'18'
	}
}
以后学到组件的时候，必须使用这样的函数式的。

MVVM

1)model:模型 数据 data methods

view：视图 页面 容器里头的元素
view-model 视图和模型的衔接桥梁 vue的实例 vm帮助我们完成了根据我们制定的绑定关系做数据或者页面的渲染

  2) vm：所以vue的实例一般取名为vm。 ==>view-model 
  3) 可以和android中的mvvm进行类比，两个是一样的思想。

数据代理

defineProperty -->见总结的笔记本
通过vm读name，读的是data中的name，这就是通过数据代理来实现的。