Vue初识Vue，Vue简介及Vue Devtools配置

Posted 2023-04-06 叁柒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue初识Vue，Vue简介及Vue Devtools配置相关的知识，希望对你有一定的参考价值。

1. Vue是什么

关于这个问题官方给了我们答案：

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

渐进式框架是指我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

2020年9月18日Vue3.0.0正式发布别名One Piece（没错就是海贼王）。

2. Vue的特点

采取组件化模式，提高代码复用率，且让代码更好维护。
声明式编码，让开发人员无需直接操作Dom，提高开发效率。
它基于标准 html、CSS 和 javascript 构建，并提供了一套声明式的、组件化的编程模型。
帮助你高效地开发用户界面，无论任务是简单还是复杂。

3. Vue的引入方式

直接使用

直接下载Vue的源码并用 <script> 标签引入，Vue 会被注册为一个全局变量,这里的路径要根据自己的实际情况进行设置

 <script type="text/javascript" src="../js/vue.js"></script>

在页面中通过CDN的方式来引入；

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

4. 安装Vue Devtools

首先要安装Vue Devtools这里直接使用edge浏览器来演示

点击管理扩展

在搜索框中搜索vue

选择这个扩展，点击获取，这里我已经安装过了，所以是删除。

在扩展设置里让Vue可以显示在栏上，同时点击vue扩展右侧的三个点，进入管理扩展

将这两个权限开放

5. 第一个Vue案例

编写我们的第一个小案例，不要忘记引入Vue的资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,name</h1>
    </div>
    <script type="text/javascript" >
        Vue.config.productionTip = false;
        const x =new Vue(
            el:'#root',//指定el供哪个容器使用
            data:
                name:"world"//data中存储数据，供容器使用
            
        )
    </script>
    
</body>
</html>

在浏览器打开我们编写的页面

熟悉的hello，world映入眼帘，我们的Vue就可以正常使用啦。

01. Vue核心 Vue简介初识

1.Vue简介

1. Vue核心

1.1 官网

1.1.2 介绍与描述

Vue 是一套用来动态构建用户界面的渐进式JavaScript框架
○ 构建用户界面：把数据通过某种办法变成用户界面
○ 渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件

1.1.3. Vue 的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注 UI，可以引入其它第三方库开发项目
采用组件化模式，提高代码复用率、且让代码更好维护

声明式编码，让编码人员无需直接操作 DOM，提高开发效率
使用 虚拟DOM 和 Diff算法，尽量复用 DOM 节点

1.1.4.与其他 JS 框架的关联

借鉴 angular 的 模板 和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术

1.1.5. Vue 周边库

vue-cli：vue 脚手架
vue-resource(axios)：ajax 请求
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC 端）

1.2. 初识 Vue

前置工作

给浏览器安装 Vue Devtools 插件
标签引入Vue包
（可选）阻止vue在启动时生成生产提示 Vue.config.productionTip = false
favicon 需要将页签图标放在项目根路径，重新打开就有了（shfit+F5 强制刷新）
初识Vue
想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root 容器里的代码被称为Vue模板
Vue 实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
xxx中的 xxx 要写 js 表达式，且 xxx 可以自动读取到data中的所有属性
注意区分：js 表达式和 js代码（语句）
a. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
a a+b demo(1) x === y ? ‘a’ : ‘b’
b. js代码（语句）
if() for()
一旦 data 中的数据发生变化，那么模板中用到该数据的地方也会自动更新

<body>
    <div id="root">
        <h1>hello , name</h1>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时产生提示

    //创建vue示例 ，只传一个参数，配置对象
    new Vue(
        el:'#root', // el用于指定当前vue实例为哪个容器服务，通常为css选择器字符串
        data: //存储数据，供 el 所指定的容器使用
            name:'vue'
        
    )
</script>

1.3 模板语法

Vue模板语法包括两大类

插值语法
功能：用于解析标签体内容
写法：xxx，xxx 是 js 表达式，可以直接读取到 data 中的所有区域
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx 同样要写 js 表达式，可以直接读取到 data 中的所有属性
备注：Vue中有很多的指令，且形式都是 v-xxx，此处只是拿v-bind举例

    <div id="root">
      <h2>插值语法</h2>
      <h4>你好， name </h4>
      <hr />
      <h2>指令语法</h2>
      <a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看 tencent.name 1</a>
      <a :href="tencent.url" x="hello">点我去看 tencent.name 2</a>
    </div>

  <script type="text/javascript">
    new Vue(
      el: '#root',
      data: 
        name: 'jack',
        tencent: 
          name: '开端',
          url: 'https://v.qq.com/x/cover/mzc00200mp8vo9b/n0041aa087e.html',
        
      
    )
  </script>

1.4. 数据绑定

Vue中有2种数据绑定的方式

单向绑定v-bind数据只能从 data 流向页面
双向绑定v-model数据不仅能从 data 流向页面，还可以从页面流向 data

备注

双向绑定一般都应用在表单类元素上，如 <input><select><textarea>等
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

<div id="root">
	<!-- 普通写法 单向数据绑定 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    
    <!-- 简写 v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值-->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
    
    <!-- 如下代码是错误的，因为 v-model 只能应用在表单类元素（输入类元素）上 -->
	<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>

<script>
    new Vue(
		el:'#root',
		data:
			name:'jack',
        
	)
</script>

1.5. el 与 data 的两种写法

el 有2种写法

创建 Vue 实例对象的时候配置el属性
先创建 Vue 实例，随后再通过vm.$mount(‘#root’)指定el的值
data 有2种写法
对象式：data：
函数式：data() return
如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了

  <body>
    <div id="root">
      <h1>你好，name</h1>
    </div>
  </body>
  <script type="text/javascript">
    // el的两种写法
    // const v = new Vue(
    // 	//el:'#root', // 第一种写法
    // 	data: 
    // 		name:'dselegent'
    // 	
    // )
    // console.log(v)
    // v.$mount('#root') // 第二种写法

    // data的两种写法
    new Vue(
      el: '#root',
      // data的第一种写法：对象式
      // data:
      // 	name:'dselegent'
      // 

      //data的第二种写法：函数式
      data() 
        console.log('@@@', this) // 此处的this是Vue实例对象
        return 
          name: 'dselegent'
        
      
    )
  </script>

1.6. MVVM 模型

MVVM模型

M：模型 Model，data中的数据
V：视图 View，模板代码
VM：视图模型 ViewModel，Vue实例
观察发现
data 中所有的属性，最后都出现在了 vm 身上
vm 身上所有的属性及 Vue 原型身上所有的属性，在 Vue 模板中都可以直接使用

    <div id="root">
        <h2>名称： name </h2>
        <h2>战队： team </h2>
        <h2>测试： $options </h2>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue(
            el: '#root',
            data:  
                name: 'uzi',
                team: 'RNG'
            
        )
    </script>

1.7. Vue 中的数据代理

Object.defineproperty 方法

建议学习文章地址：

https://zh.javascript.info/property-descriptors

https://zh.javascript.info/property-accessors

属性标志:

对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”

writable — 如果为 true，则值可以被修改，否则它是只可读的
enumerable — 如果为 true，则表示是可以遍历的，可以在for… .in Object.keys()中遍历出来
configurable — 如果为 true，则此控制属性可以被删除，默认值是false

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象。
prop：要定义或修改的属性的名称
descriptor：要定义或修改的属性描述符

let number = 18
let person = 
  name: '张三',
  sex: '男',


Object.defineProperty(person, 'age', 
  // value:18,
  // enumerable:true,		// 控制属性是否可以枚举，默认值是false
  // writable:true,			// 控制属性是否可以被修改，默认值是false
  // configurable:true	// 控制属性是否可以被删除，默认值是false

  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get() 
    console.log('有人读取age属性了')
    return number
  ,

  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value) 
    console.log('有人修改了age属性，且值是', value)
    number = value
  

)
// console.log(Object.keys(person))
console.log(person)

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

      let vm = ;
      let data = 
        name: 'ds',
        age: 18,
      ;
      Object.defineProperty(vm, 'age', 
        get() 
          return data.age;
        ,
        set(value) 
          data.age = value;
        ,
      );

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理
1. 通过object.defineProperty()把data对象中所有属性添加到vm上
2. 为每一个添加到vm上的属性，都指定一个 getter setter
3. 在getter setter内部去操作（读/写）data中对应的属
  
  Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data进行数据劫持，实现响应式

1.8. 事件处理

1.8.1. 事件的基本用法

使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
methods中配置的函数，都是被 Vue 所管理的函数，this 的指向是vm或组件实例对象
@click="demo"和@click="demo($event)"效果一致，但后者可以传参

<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到name学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <!-- 主动传事件本身 -->
    <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>

<script>
	const vm = new Vue(
        el:'#root',
        data:
            name:'vue',
        ,
        methods:
            // 如果vue模板没有写event，会自动传 event 给函数
            showInfo1(event)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！')
            ,
            showInfo2(event,number)
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            
        
	);
</script>

1.8.2. 事件修饰符

Vue 中的事件修饰符

prevent 阻止默认事件（常用）
stop 阻止事件冒泡（常用）
once 事件只触发一次（常用）
capture 使用事件的捕获模式
self 只有event.target是当前操作的元素时才触发事件
passive 事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”

    <style>
      * margin-top: 20px;
      .demo1 height: 50px;background-color: skyblue;
      .box1 padding: 5px;background-color: skyblue;
      .box2 padding: 5px;background-color: white;
      .list width: 200px;height: 200px;background-color: skyblue;overflow: auto;
      li height: 100px;
    </style>

    <div id="root">
      <h2>欢迎来到 name 学习</h2>
      <!-- 阻止默认事件（常用） -->
      <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

      <!-- 阻止事件冒泡（常用） -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.qq.com" @click.prevent.stop="showInfo">点我提示</a> -->
      </div>

      <!-- 事件只触发一次（常用） -->
      <button @click.once="showInfo">点我提示信息</button>

      <!-- 使用事件的捕获模式 -->
      <div class="box1" @click.capture="showMsg(1)">捕获到的时候就直接触发
        div1
        <div class="box2" @click="showMsg(2)">
          div2
        </div>
      </div>

      <!-- 只有event.target是当前操作的元素时才触发事件； -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>

      <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
      <!-- scroll是滚动条滚动，passsive没有影响 -->
      <!-- wheel是鼠标滚轮滚动，passive有影响 -->
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false

      new Vue(
        el: '#root',
        data: 
          name: '尚硅谷'
        ,
        methods: 
          showInfo(e) 
            alert('同学你好！')
            // console.log(e.target)
          ,
          showMsg(msg) 
            console.log(msg)
          ,
          demo() 
            for (let i = 0; i < 100000; i++) 
              console.log('#')
            
            console.log('累坏了')
          
        
      )
    </script>

1.8.3. 键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

Vue中常用的按键别名
回车 enter
删除 delete捕获“删除”和“退格”键
退出 esc
空格 space
换行 tab特殊，必须配合keydown去使用
上 up
下 down
左 left
右 right
Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
系统修饰键（用法特殊）ctrlaltshiftmeta（meta就是win键）
1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
  指定 ctr+y 使用 @keyup.ctr.y
2. 配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

    <div id="root">
      <h2>欢迎打开name笔记</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br/>
      <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br/>
      <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"><br/>
    </div>
	
    <script type="text/javascript">
      Vue.config.productionTip = false	// 阻止 vue 在启动时生成生产提示。
      Vue.config.keyCodes.huiche = 13		// 定义了一个别名按键

      new Vue(
        el: '#root',
        data: 
          name: 'vue'
        ,
        methods: 
          showInfo(e) 
            // console.log(e.key,e.keyCode)
            console.log(e.target.value)
          
        ,
      )
    </script>

1.9. 计算属性

1. 差值语法实现

<title>姓名案例_插值语法实现</title>

<div id="root">
  姓：<input type="text" v-model="firstName"> <br/>
  名：<input type="text" v-model="lastName"> <br/>
  全名：<span> firstName - lastName <以上是关于Vue初识Vue，Vue简介及Vue Devtools配置的主要内容，如果未能解决你的问题，请参考以下文章 
 01. Vue核心 Vue简介 初识
 websocket简介及上手，node + vue实现websocket服务
 1 [初识]Vue3教程简介与Hello World编写
 前端笔记五初识VUE
 前端笔记五初识VUE
 01-vue简介及起步