vue框架教程

正在更新中…

Vue -渐进式JavaScript框架

介绍

• vue2官网 (vue3在这里)
• vue-rotuer官网
• vuex官网
• vue调试工具(必装,需要科学上网)
• vue组件大全
• vue-cli开发工具
• vite开发工具
• vue-ssr官网
• nuxtjs官网(实现vuessr,快速搭建平台)
• Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架

学习Vue要转化思想

• 不要在想着怎么操作DOM(jquery思想)，而是想着如何操作数据！！！

起步 - Hello Vue

使用vue-cli工具

• 安装：npm i -g @vue/cli

vue-cli是什么?
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  一个运行时依赖 (@vue/cli-service)，该依赖：
  可升级；
  基于 webpack 构建，并带有合理的默认配置；
  可以通过项目内的配置文件进行配置；
  可以通过插件进行扩展。
  一个丰富的官方插件集合，集成了前端生态中最好的工具。
  一套完全图形化的创建和管理 Vue.js 项目的用户界面。

如何使用?

//创建一个项目
vue create your-app
//之后按照提示来就可以

vue ui  //使用可视化界面配置项目

使用vite开发

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
使用 npm：

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

或者 yarn：

yarn create @vitejs/app <project-name>
cd <project-name>
yarn
yarn dev

但是对于vue2需要一个插件,需要在根目录添加一个vite.config.js,并使用插件vite-plugin-vue2(需要自己研究配置)

const {
    createVuePlugin } = require('vite-plugin-vue2');

module.exports = {
   
  plugins: [createVuePlugin()],
};

创建一个hellowold程序

<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app">{
  { msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
  var vm = new Vue({
    
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
    
      msg: 'Hello Vue'
    }
  })
</script>

Vue实例

• 注意 1：先在data中声明数据，再使用数据
• 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg

var vm = new Vue({
  data: {
    msg: '大家好，...'
  }
})

vm.$data.msg === vm.msg // true

数据绑定

• 最常用的方式：Mustache(插值语法)，也就是 { {}} 语法
• 解释：{ {}}从数据对象data中获取数据
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{ {}}中只能出现JavaScript表达式 而不能解析js语句
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

<h1>Hello, {
  { msg }}.</h1>
<p>{
  { 1 + 2 }}</p>
<p>{
  { isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{
  { err }}"></h1>

双向数据绑定 Vue two way data binding

• 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
  • 数据的改变会引起DOM的改变
  • DOM的改变也会引起数据的变化
• 原理：Object.defineProperty中的get和set方法
  • getter和setter：访问器
  • 作用：指定读取或设置对象属性值的时候，执行的操作
• Vue - 深入响应式原理
• MDN - Object.defineProperty()

/*  defineProperty语法 介绍 */
var obj = {
   }
Object.defineProperty(obj, 'msg', {
   
  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
  set: function (newVal, oldVal) {
     },
  // 读取 obj.msg 时get方法会被系统调用
  get: function ( newVal, oldVal ) {
   }
})

Vue双向绑定的极简实现

• 剖析Vue原理&实现双向绑定MVVM

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {
    }

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
    
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
    
  obj.msg = event.target.value
})
</script>

动态添加数据的注意点

• 注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式
• 可以通过以下方式实现动态添加数据的响应式
  • 1 Vue.set(object, key, value) - 适用于添加单个属性
  • 2 Object.assign() - 适用于添加多个属性

var vm = new Vue({
   
  data: {
   
    stu: {
   
      name: 'jack'