Vue2官网使用及简介

最新推荐文章于 2024-05-29 11:03:09 发布

木子李BLOG

最新推荐文章于 2024-05-29 11:03:09 发布

阅读量1.6w

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/sinat_29304113/article/details/121632737

版权

官网地址

中文官网地址：https://cn.vuejs.org/ 英文官网地址：https://vuejs.org/

文档使用

Vue定义

一套用户构建用户界面的渐进式JavaScript框架。

了解Vue基础知识

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为【Vue模板】
容器与实例一一对应
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{ xxx}}插值中的xxx可以自动读取到data中的所有属性；
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新（数据劫持）

注意区分：js表达式和 js代码（语句）
(1)表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方； a a+b demo(1) x===y?‘a’:‘b’
(2)js代码（语句） if(){} for(){}

<!-- 容器 -->
<div id="root">
        <!-- 插值语法 -->
    <h1>Hello,{{name}}</h1>
</div>
 <script>
      Vue.config.productionTip = false    
      // 创建Vue事例
      new Vue({
          el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
          // el:document.getElementById('root'),
          data:{//data用户存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
              name:'张三'
          }
      })
  </script>

Vue模板语法有2大类：

(1)插值语法：功能：用于解析标签体内容。写法：{{xxxx}},xxx是表达式，且可以直接读取到data中所有属性。
(2)指令语法：功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）
举例：v-bind:href=‘xxxx’
或简写为:href=‘xxxx’,xxxx要写js表达式且可以直接读取到data中所有属性。
html <a v-bind="url" :x="hello">这是一个超链接</a>
举例：
(1)v-on:click=‘xxxx’ 或简写为@click=‘xxxx’ ，其中xxx是事件名
(2)事件的回调需要配置在methods对象中，最终会在vm上；
(3)methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件事例对象；
(4)@click=“demo” 和 @click="demo($event)"效果一致，但后者可以传参
	<div id="root">
        <button v-on:click="showInfo1">点我提示信息</button>
                            
        <button v-on:click="showInfo2($event,66)">点我提示信息</button>
	</div>
    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    name:"哈哈"
                }
            },
            methods: {
                /* 方法不做数据代理 */
                showInfo1(event){
                    console.log(event.target.innerHTML);
                },
                showInfo2(event,param){
                    console.log(param,event);
                }
            },
        })
    </script>

Vue数据绑定有2种：

(1)单向绑定(v-bind):数据只能从data流向页面。
(2)双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值
xml <input v-model="name">

data与el的写法有2种：
el有2种写法
(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值
data有2种写法
(1)对象式
(2)函数式
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

Vue特点

采用组件化模式，提高代码复用率，且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM,提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

搭建开发环境

直接引入CDN路径或下载到本地资源进行引入（本地资源参考下载中的内容）

A.引入开发版本,控制台提示解决方法：
1.安装开发调试工具，资源在下载中
2.Vue.config.productionTip = false（阻止 vue 在启动时生成生产提示）
B.引入生产版本:
NPM引用,搭配命令行工具

了解MVVM模型

M：模型（Model）:data中的数据
V：视图（View）:模板代码
VM:视图模型(ViewModel):Vue实例

观察发现：
data中所有的属性，最后都出现再了vm身上。
vm身上所有的属性及 Vue原型上所有属性，在Vue模板上都可以直接使用

了解defineProperty用法

Object.defineProperty用法

 var obj = {a:1,b:2, c:3}
/*Object.defineProperty(obj,'d',{
    value:4,
    enumerable:true,//控制属性是否可以枚举,默认为false
    writable:true,//控制属性是否可以被修改,默认为false
    configurable:true//控制属性是否可以被删除,默认为false
 })
 console.log(Object.keys(obj))
 */
var num = 10
Object.defineProperty(obj,'e',{
  get:function(){
       console.log("读取了");
       return num
   },
   set:function(value){
       num = value
       console.log("有人修改了");
   }
})

了解数据代理

定义：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj= {x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{
    get:function(){
        return obj.x
    },
    set:function(val){
        obj.x = val
    }
})

了解Vue中数据代理

总结：

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

了解监视数据的原理

vue会监视data中所有层次的数据。
如何检测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要检测的数据。
（1）对象中后追加的属性，vue默认不做相应式处理
（2）如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
如果检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新。
（2）重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（2）Vue.set() 或 vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm或vm的根对象添加属性！！！！