Vue开发与实战

一.vue介绍

1. 官网初识

https://cn.vuejs.org/

2.环境搭建

2-1 Vue CLI

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。建议使用 Vite 开始新的项目，除 非你依赖特定的 Webpack 的特性。在大多数情况下， Vite 将提供更优秀的开发体验。

npm install -g @vue/cli

2-2 Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的 作者！

要使用 Vite 来创建一个 Vue 项目，非常简单：

$ npm init vue@latest //使用npm
$ yarn create vite //使用yarn

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

二.vue基础

1.模板语法

1-1 我的第一个vue应用

<div id="box">
    {{10+20}}
    {{name}}
</div>
<script>
var app = Vue.createApp({
    data(){
        return {
            name:"kerwin"
        }
    }
}).mount("#box")
</script>

1-2 应用背后的真相

（1）Object.defineProperty

var obj = {}
var obox = document.getElementById("box")
Object.deŨ neProperty(obj,"myname",{
  get(){
    console.log("有人访问了")
    return obox.innerHTML
  },
  set(value){
    console.log("有人改变我了",value)
    obox.innerHTML = value
  }
})
/*
  缺陷：无法监听数组的改变， 无法监听class改变， 无法监听Map Set结构。
*/

（2） 

var obj = {}
var obox = document.getElementById("box")
var vm = new Proxy(obj, {
  get(target, key) {
    console.log("get")
   return target[key]
  },
  set(target, key, value) {
    console.log("set")
    target[key] = value
    obox.innerHTML = value
  }
})
/*
  vue3 基于Proxy ,ES6 Proxy ,
  if(支持proxy){
    // proxy进行拦截处理， 实现功能
  }else{
    // object.deŨ neProtery
 }
*/

1-3 v-html- 模板的陷阱

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!--
    安全警告：
    在动态网站上渲染HTML是非常危险的，容易造成XSS漏洞
    请仅在内容安全可信时在使用v-html
    并且永远不要使用用户提供的HTMl内容
-->

2.class与style

2-1 class的绑定

//对象写法
data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}
<div :class="classObject"></div>

//数组写法
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
<div :class="[activeClass, errorClass]"></div>

2-2 style的绑定-同上

//对象写法
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}
<div :style="styleObject"></div>

//数组写法
data() {
  return {
    arr:[{
      width:"200px",
      height:"200px",
      backgroundSize:"cover"
    }],
  }
}
this.arr.push({
  backgroundImage:"url(https://pic.maizuo.com/ocess=image/quality,Q_70)"
})

3. 条件渲染

v-if 是 “ 真实的 ” 按条件渲染，在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是 惰性 的：如果在初次渲染时条件值为 false ，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

v-show ，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

4.数组变动侦测

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

对于一些不可变 (immutable) 方法，例如 fi lter() ， concat() 和 slice() ，这些都不会更改原数组，而总是 返回一个 新数组 。

5.过滤器

在 3.x 中，过滤器已移除，且不再支持。建议用方法调用或计算属性来替换它们

在 2.x 中，开发者可以使用过滤器来处理通用文本格式。

<p>{{ accountBalance | currencyUSD }}</p>
filters: {
  currencyUSD(value) {
    return '$' + value
  }
}

6.跨级通信(祖父和孙子之间通信)-provide&inject

//child.vue //grandchild.vue.....
export default {
  inject:["message"]
}
//app.vue -非响应式
data(){
  return {
    message:"hello kerwin"
  }
},
provide() {
  return {
    message: this.message
  }
}