VUE

补充：css预处理器-让css带有编程思维，方便不同节日有不同样式

less是一种可以带变量逻辑的css特性的语言，需要通过js脚本或编译器才能转化为css文件，如果只是测试那就引入js脚本，如果是服务器端就用编译器编译好
补充https://blog.csdn.net/xllllll___/article/details/136028214

再补充

### 1. **浏览器原生只支持 JavaScript、HTML、CSS**
浏览器只能直接执行 **标准 JavaScript**、解析 HTML 和 CSS。Vue 的以下特性需要额外处理：
- **模板语法**（如 `{{ data }}`、`v-if`、`v-for`）。
- **单文件组件**（`.vue` 文件中的 `<template>`、`<script>`、`<style>`）。
- **TypeScript**、**Sass** 等非原生语法。

这些内容必须被转换为浏览器能理解的 JavaScript、HTML 和 CSS，否则浏览器会报错。

---

### 2. **两种开发模式：编译时与运行时**
Vue 有两种使用场景，对应不同的编译方式：

#### **(1) 直接通过 CDN 引入 Vue（无需构建工具）**
- **适用场景**：简单项目或快速原型。
- **代码示例**：
  ```html
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <div id="app">{{ message }}</div>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { message: "Hello Vue!" };
      }
    }).mount('#app');
  </script>

原理：
- 浏览器直接加载 Vue 的完整版（包含模板编译器）。
- 模板（如 {{ message }}）在运行时由 Vue 的编译器动态转换为 JavaScript 渲染函数。
- 缺点：性能较低（需在浏览器中编译模板），且不支持单文件组件或现代语法（如 TypeScript）。

(2) 使用构建工具（如 Vite、Webpack）

适用场景：实际项目开发。

代码示例（单文件组件 App.vue）：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return { message: "Hello Vue!" };
  }
};
</script>

原理：
- 构建工具（如 vite）会在开发阶段将 .vue 文件预编译为纯 JavaScript。
- <template> 转换为渲染函数；<script> 和 <style> 分别处理为 JS 和 CSS。
- 优势：性能更高（编译在开发阶段完成），支持代码分割、热更新等。

3. 关键：构建工具的作用

若项目中使用了 .vue 文件或 Vue 模板语法，必须通过构建工具处理：

编译模板：将 v-if、{{ data }} 等语法转换为虚拟 DOM 操作。
处理依赖：打包多个文件为一个或多个浏览器可加载的 JS 文件。
优化代码：压缩、Tree-shaking（移除未使用代码）、Polyfill 兼容旧浏览器等。

若未使用构建工具，浏览器将无法解析 .vue 文件或模板语法，导致页面空白或报错。

4. 用户的误解来源

用户可能误以为“直接运行”是因为：

开发环境的热更新：构建工具（如 Vite）在本地开发时实时编译代码，模拟了“无需编译”的错觉。
CDN 引入 Vue 的完整版：浏览器运行时动态编译模板，但这种方式不适用于复杂项目。

总结

Vue 的模板和单文件组件本身无法被浏览器直接运行，必须通过构建工具预编译为 JavaScript。
直接通过 CDN 使用 Vue 虽然无需构建工具，但依赖 Vue 的运行时模板编译器，性能较差且功能受限。
现代 Vue 开发强烈推荐使用构建工具（如 Vite），以获得更好的开发体验和性能优化。

创建第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>
<!--view层 模版-->
<div id="app">
    {{ message }}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        //Model层 数据
        data: {
            message: 'Hello Vue.js!'//可以实现和view层的双向数据绑定，就是不用刷新就能看到变化
            //改的是自己模拟的dom对象，不受普通的html和dom的影响
            //不像过往是需要用document.getElementById('id')来获取dom对象，再用dom对象来操作，这种vue.js的操作方式更加方便，也更加不卡
        }
    });
</script>
</body>
</html>

Vue基本语法

<body>
<!--view层 模版-->
<div id="app">
  <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ok: true

        }
    });
</script>
</body>
</html>

<div id="app">
  <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>C</h1>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'A',

        }
    });
</script>
</body>
</html>

for

<body>
<!--view层 模版-->
<div id="app">
<li v-for="item in item">
    {{item.message}}
</li>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
         item:[
             {message:'hello'},
             {message:'world'},
         ]

        }
    });
</script>
</body>
</html>

Vue绑定事件

<body>
<!--view层 模版-->
<div id="app">
    <button v-on:click="sayhi">Say Hi</button>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello haha',
        },
        methods: {//方法要定义在methods中
            sayhi: function () {
                alert(this.message);
            }

        },
    });
</script>
</body>
</html>

双向绑定

vue.js是一个MVVM框架，数据双向绑定，如果数据发生变化时，视图就发生变化，或视图发生变化时，数据也会跟着同步，这就是vue的强大

</head>
<body>
<!--view层 模版-->
<div id="app">
  输入的文本：<input type="text" v-model="message">>{{ message }}
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>
</body>
</html>

<body>
<!--view层 模版-->
<div id="app">
    性别：
  <input type="radio" name="gender" value="male" v-model="haah">男
  <input type="radio" name="gender" value="female" v-model="haah">女
    <p>选中了：{{ haah}}</p>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            haah: ''
        }
    });
</script>
</body>
</html>

<body>
<!--view层 模版-->
<div id="app">
    下拉框：
    <select v-model="haah">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <span>当前选择：{{haah}}</span>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            haah: ''
        }
    });
</script>
</body>
</html>

VUE组件

就是自己定义标签

<body>
<div id="app">
<jjf v-for="item in item" v-bind:xx="item"></jjf>
</div>

<script>
    //定义一个vue组件
    Vue.component('jjf', {
        props: ['xx'],
        template: '<li>{{xx}}</li>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            item:['apple','banana','orange']
        }
    });
</script>
</body>
</html>

Axios异步通信（用typescript写的框架）

Axios是一个开源的可以用在浏览器和node.js的异步通信框架，主要作用是实现AJAX异步通信

AJAX 是技术，而非框架
技术特性：

基于浏览器原生能力（如 XMLHttpRequest 或 Fetch API）。
不依赖特定工具或代码库，可通过原生 JavaScript 实现。
是一种设计模式，用于解决“无刷新更新页面”的问题。
框架与库的作用：

框架/库（如 Axios、jQuery AJAX、Fetch API 封装）是对 AJAX 技术的封装，提供更简洁的 API 和额外功能（如拦截器、错误处理）。
它们简化了 AJAX 的实现，但底层仍依赖 AJAX 的核心原理。
类比说明
AJAX 类似“汽车发动机的工作原理”。
框架/库类似“不同品牌的发动机”（如丰田、宝马），基于同一原理但提供不同的优化和接口。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>{{ info.name }}</div>
    <div>{{ info.address.street }}</div>
    <div>{{ info.address.city }}</div>
    <a v-bind:href="info.url">点我</a>
</div>

<script>

    var vm = new Vue({
        el: '#app',
        data(){//注意这是一个方法，不是属性
            return {
                //请求的返回参数，必须和json字符串一样
                info: {
                    name:null,
                    address:{
                        street:null,
                        city:null,
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数,链式编程,ES6新特性
            axios.get('data.json').then(response => (this.info = response.data));

        },

    });
</script>
</body>
</html>

计算属性

计算属性：计算出的结果保存在属性中，内存中运行：虚拟DOM，缓存

<script>

    var vm = new Vue({
        el: '#app',
       data: {
            message: 'Hello Vue.js!'
       },
       methods: {
            currentTime : function () {
                return Date.now();
            }
       },
        computed: {//不能和方法重名，否则只会执行方法
           currentTime1: function () {
                return Date.now();
            }

        }

    });
</script>

补充说明

Vue 的计算属性（Computed Properties）和方法（Methods）在功能和使用场景上有显著区别，尤其是在性能和设计目的上。以下是核心区别及为什么计算属性会被认为“放在内存中”：

1. 核心区别
特性	计算属性（Computed）	方法（Methods）
缓存机制	有缓存，依赖的响应式数据未变化时直接返回结果	无缓存，每次调用都会重新执行函数
调用方式	作为属性使用（如 this.computedValue）	作为函数调用（如 this.methodName()）
适用场景	复杂计算、依赖多个数据的场景	事件处理、需要主动触发的操作
性能优化	避免重复计算，适合高频读取的场景	适合低频或需要实时计算的场景
2. 为什么说计算属性“放在内存中”？
计算属性的缓存机制是其核心特性，具体表现为：

依赖追踪：
计算属性会监听其依赖的响应式数据（如 data 中的属性或其他计算属性）。只有当依赖发生变化时，计算属性才会重新计算。

缓存结果：
如果依赖未变化，多次访问计算属性会直接返回之前缓存的结果，无需重复计算。这类似于将结果“暂存”在内存中，避免重复执行复杂逻辑。

性能优势：
对于需要频繁读取且计算成本高的场景（如过滤列表、格式化数据），缓存机制能显著提升性能。

3. 示例对比
计算属性
javascript

computed: {
  fullName() {
    // 当 this.firstName 或 this.lastName 变化时，才会重新计算
    return this.firstName + ' ' + this.lastName;
  }
}
使用方式：{{ fullName }}（无需调用，直接作为属性使用）。
多次访问 fullName 时，若依赖未变化，直接返回缓存值。
方法
javascript

methods: {
  getFullName() {
    // 每次调用都会执行
    return this.firstName + ' ' + this.lastName;
  }
}
使用方式：{{ getFullName() }}（需主动调用）。
每次渲染都会重新执行函数，无论依赖是否变化。
4. 如何选择？
用计算属性：
当需要基于响应式数据派生出一个值，且该值会被多次读取时（如数据格式化、过滤列表）。

用方法：
当需要主动触发操作（如事件处理）或不需要缓存时（如实时获取最新数据）。

总结
计算属性通过缓存机制将结果“暂存”在内存中，避免重复计算，适合依赖数据变化不频繁但读取频繁的场景。而方法更适合需要主动触发或实时计算的场景。理解这一区别有助于在 Vue 开发中合理选择工具，优化性能。

插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-item slot="todo-item" v-for="item in todoItems" :item="item"></todo-item>
</todo>
</div>

<script>
Vue.component('todo'),{
    template: '<div>'+
        '<slot name="todo-title"></slot>'+
        '<ul>'+
            '<slot name="todo-item"></slot>'+
        '</ul>'+
    '</div>',
}
Vue.component('todo-title', {
    props: ['title'],
    template:'<div>{{title}}</div>'
});
Vue.component('todo-item', {
    props: ['item'],
    template:'<li>{{item}}</li>'
});
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'My To-Do List',
            todoItems: ['Buy groceries', 'Learn Vue.js', 'Build a blog']
        }


    });
</script>
</body>
</html>

补充
: 插槽slot是Vue.js中用于分发内容的HTML元素。这个插槽的名称是todo-title，它表示当这个组件被使用时，可以在这个位置插入一个名为todo-title的子组件或者其他内容。这个插槽的具体内容取决于子组件传递给它什么。

: 这里的插槽todo-item是用于在无序列表ul中插入内容的。父组件可以在这个位置插入多个todo-item子组件，每个子组件代表一个待办事项。这个插槽的具体内容也是由子组件决定的。

所以插槽的目的就是来放子组件的，所以在父组件提前放插槽，方便子组件准确插入位置

自定义事件内容分发-不是很懂，再研究下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<todo><!-- v-on自定义事件-->
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-item slot="todo-item" v-for="(item, index) in todoItems" :item="item" v-bind:index="index" @deleteItem="removeItem(index)" v-on：remove="removeItem(index)":key="index"></todo-item>

</todo>
</div>

<script>
Vue.component('todo'),{
    template: '<div>'+
        '<slot name="todo-title"></slot>'+
        '<ul>'+
            '<slot name="todo-item"></slot>'+
        '</ul>'+
    '</div>',
}
Vue.component('todo-title', {
    props: ['title'],
    template:'<div>{{title}}</div>'
});
Vue.component('todo-item', {
    props: ['item'],
    template:'<li>{{index}}---{{item}}<button @click="deleteItem"> 删除</button></li>',
    //组件里面也能调用方法
    //只能绑定当前组件的方法
    methods: {
        remove: function() {
           //this.$emit自定义事件
            this.$emit('remove', index);
        }
    }
});
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'My To-Do List',
            todoItems: ['Buy groceries', 'Learn Vue.js', 'Build a blog']
        },
        methods: {
            removeItem: function(index) {
                console.log('删除了'+ this.todoItems[index]+'项');
                this.todoItems.splice(index, 1);
            }
        }


    });
</script>
</body>
</html>

第一个vue-cli程序

vue-cli官方提供的一个脚手架，用于快速生成一个vue项目模板
提前定义好目录和基础代码，就像用maven项目可以创建一个骨架项目，这个骨架就是脚手架，使开发更快速
-统一目录
-本地调试
-热部署
-单元测试
-集成打包上线

1、npm先导入vue-cli包（可以解释这是脚手架的核心库，里面有各个模版vue list）
2、建项目-到建vue文件夹的路径，进入cmd界面，执行vue init webpack myvue （myvue是文件夹名）-这是在脚手架基础上，再安装webpack版本及其它依赖
然后安装就进入myvue目录，启动vue项目 -npm run dev

目录讲解
node_modules包含node.js服务器包含的东西（vue每个工程都要下载所有依赖到工程中，太大了，maven会统一管理到本地仓库，所有工程都能用）
package.json是下载依赖的地方，如果有些版本太高可以通过这里修改

webpack学习使用

模块化开发的操作
1、建立modules,放各种js,但要有一个main.js

//暴露一个方法,用export关键字导出
exports.sayhi = function(){
    document.write("<h1>Hahah</h1>");
}
exports.sayhello = function(){
    document.write("<h1>Hello</h1>");
}

2.main.js引入

var hello = require('./hello.js');//require就偈java中的import一样，可以引入其他模块的函数,这就是模块化开发，不像以前要一个个script引入，
hello.sayhi(); //输出<h1>Hahah</h1>
hello.sayhello(); //输出hello

3、建立一个webpack.config.js，作为打包路径配置

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}

4、打包完会在目录下生成./js/bundle.js-这就是打包成低版本
5、在html的script引入第四步的文件路径

webpack --watch实时监听代码改变并进行打包-热布署

vue-router路由

第一步：创建vue-cli工程，导入路由依赖，可以理解这个路由就是转发的作用
cnpm install vue-router@3.1.3 --save-dev 安装vue-router依赖

第二步：建立componets菜单，设置主页按钮跳转后的页面
main页面

<script setup>

</script>

<template>
<div>首页</div>
</template>

<style scoped>

</style>

内容页面

<script >
  export default {
    name: 'Content'
  }
</script>

<template>
  <h1>内容页面</h1>
</template>

<style scoped>

</style>

第三步：建立router菜单，设计index.js，集合各个页面的vue,由他控制指定跳转到哪个页面，需要把各个页面import过来

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content.vue'
import Main from '../components/Main.vue'

//安装路由
Vue.use(VueRouter)

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',//路径，但访问域名/content时，就会访问这个名叫content的vue组件(component)
      name: 'content',
      //跳转的组件
      component: Content

    },
    {
      //路由路径
      path: '/main',
      name: 'content',
      //跳转的组件
      component: Main

    },
    ]
});

第四步：在main.js创建路由实例，通过main.js指定加载哪个主路由，就第三步的index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index'//导入路由

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,//全局唯一
  components: { App },
  template: '<App/>'
})

第五步：把app.vue中绑定各个页面的路由

<template>
  <div id="app">

  <router-link to="main">首页</router-link>
    <router-link to="content">内容</router-link>
    <router-view></router-view>

  </div>
</template>

<script>
  import Content from './components/Content'
  export default {
    name: 'App',

    }


</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第六步：执行npm run dev，在开发时，html页面是看不到script标签，因为打包工具会自己打包，在运行时是可以看到他在html页面引进了script标签

vue=elementUI

补充：vue文件最终都会编译器编译成javascript语言

第一步创建vue-cli项目
cd 进入项目
第二步：安装vue-router
第三步：安装elemet-ui
第四步：安装依赖，npm install，但是好像第一步其实已经安装好了，如果modules有2W多个文件就是安装好了，其实这一步就是安装package.json里面有的包
第五步：安装sass加载器-就是css预编器，带有逻辑的css语言
第六步：启动 npm run dev

sass 的作用
核心编译器:
sass 是 Dart Sass 的 JavaScript 实现，负责将 Sass/SCSS 代码编译为标准 CSS。
例如，它会处理嵌套规则、变量、混合宏（@mixin）等语法，将其转换成浏览器可识别的 CSS。

必要性:
如果没有安装 sass，构建工具无法理解 .scss 或 .sass 文件的语法，会直接抛出错误！

sass-loader 的作用
Webpack/Vite 的桥梁:
sass-loader 是 Webpack 的加载器（Loader），负责让 Webpack 识别并预处理 Sass 文件（如 .vue 文件中的

posted @ 2025-03-25 23:21 乘加法阅读(18) 评论(0) 收藏举报

刷新页面返回顶部

Newlife666

VUE