Vue学习

最新推荐文章于 2023-03-14 16:10:43 发布
最新推荐文章于 2023-03-14 16:10:43 发布
阅读量257 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46890904/article/details/119548371
版权

Vue

https://bkimg.cdn.bcebos.com/pic/b21bb051f8198618367a57502ca239738bd4b21c489d?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto

渐进式 JavaScript 框架

1、简介

官网：https://cn.vuejs.org

前端体系、前后端分离

SOC:关注点分离

只管视图层

  • 网络通信：axios

  • 页面跳转：vue-router

  • 状态管理：vuex

  • Vue-UI: ICE

  • 结构层：HTML

  • 表示层：CSS

    • CSS预处理器：动态变化——>SASS(Ruby)、LESS(NodeJS)

  • 行为层：JavaScript

2、UI框架

  • Ant-Design：https://ant.design/index-cn
    在这里插入图片描述

  • ElementUI：https://element.eleme.cn/#/zh-CN

    在这里插入图片描述

    vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh

    在这里插入图片描述

  • Bootstrap：https://www.bootcss.com

    在这里插入图片描述

  • AmazeUI：http://amazeui.shopxo.net

    在这里插入图片描述

  • iView：https://www.iviewui.com/

在这里插入图片描述

iview控制台：https://adminpro.iviewui.com/dashboard/console

在这里插入图片描述

iview-admin：https://github.com/iview/iview-admin

  • ICE：https://ice.work/

在这里插入图片描述

  • VantUI：https://vant-contrib.gitee.io/vant/#/zh-CN/

    在这里插入图片描述

  • AtUI：https://aliqin.github.io/atui/

    在这里插入图片描述

  • CubeUI：https://didi.github.io/cube-ui/#/zh-CN

在这里插入图片描述

NodeJS 带来的全栈时代：http://nodejs.cn/

在这里插入图片描述

3、Vue基础语法

  1. CDN

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

  2. 官网的GitHub也可以直接下文件

3.1、v-bind:title = ‘’

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- MVC模型 ——> MVVM模型 -->

    <!-- view层 模板 -->
    <!-- 方式一 -->
    <!-- <div id="app">
        {{message}}
    </div> -->

    <!-- 方式二 -->
    <!-- 会出现 message 的数据 -->
    <div id="app">
        <!-- v-bind:title 绑定元素的 title 与 message 属性一致 -->
        <!-- 用于鼠标触碰显示信息 -->
        <span v-bind:title="message">
            鼠标悬停几秒查看此处动态绑定的提示信息
        </span>
    </div>
    
    <!-- 也可以用lib包下的vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            //Model层 数据
            data:{
                message:"hello,vue"
            }
        });

        //双向绑定，就是前端数据改变，data数据也会改变，反过来也可以，而且这个页面不用刷新
        //上面这种被广泛应用了，例如节假日做活动，只需要改变前端样式即可，不需要不断刷新页面
        vm.message = 'Happy~Study🙂';
    </script>

</body>
</html>

在这里插入图片描述

3.2、v-if 和 v-else

<body>

    <!-- 这就只需要后端传数据过来就可以判断选择 -->
    <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 src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                // ok:true
                type:'A'
            }
        });

        // vm.ok = false;  //显示 No

        // vm.type = 'B'; //显示B
        // vm.type = 'R'; //显示C
    </script>
</body>

3.3、v-for

<body>
    <div id="app">
        
        <li v-for="(item,index) in items">
            {{item.message}}--{{index}}--{{item}}
        </li>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                // 下面 items 数组有两个对象
                items:[
                    {message:'Happy😄'},
                    {message:'Sad😥'},
                    {message:'angry😤'},
                ]
            }
        });
    </script>
</body>

在这里插入图片描述

4、事件

4.1、v-on

<body>
    <div id="app">
        
        <button v-on:click="sayHi">click me</button>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "Happy🥰"
            },
            methods: {
                //方法必须定义在 vue 的 methods 对象里面
                sayHi: function(){
                    alert(this.message);
                }
            }
        });
    </script>
</body>

在这里插入图片描述

5、双向绑定

input

<body>
    <div id="app">
        输入的文本：<input type="text" v-model="message">{{message}}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "🧐😀😁😂🤣😃😄"
            },
            methods: {
                
            }
        });
    </script>
</body>

在这里插入图片描述

textarea

<textarea name="" id="" cols="30" rows="10"v-model="message"></textarea>
{{message}}

在这里插入图片描述

单选框

<body>
    <div id="app">
        性别：
        <input type="radio" name="sex" value="👦🏻" v-model="qinjiang">👦🏻
        <input type="radio" name="sex" value="👧🏻" v-model="qinjiang">👧🏻

        <p>
            选中了谁：{{qinjiang}}
        </p>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                qinjiang: ''
            },
            methods: {
                
            }
        });
    </script>
</body>

在这里插入图片描述

下拉框

<body>
    <div id="app">
        下拉框：
        <select v-model="qinjiang">
            <option value="" disabled>--请选择--</option>
            <option>😀</option>
            <option>😭</option>
            <option>😠</option>
            <option>😄</option>
        </select>
        <span>value：{{qinjiang}}</span>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                qinjiang: ''
            },
            methods: {
                
            }
        });
    </script>
</body>

在这里插入图片描述

6、Vue组件

6.1、第一个组件程序

<body>
    <div id="app">
        <qinjiang></qinjiang>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>

        //定义组件component
        Vue.component(
            "qinjiang",
            {
                //用qinjiang代替li标签
                template: '<li>Hello</li>'
            }
        );

        var vm = new Vue({
            el: "#app"
        });
    </script>
</body>

6.2、进阶版

<body>
    <div id="app">
        <!-- 组件：传递给组件中的值：props -->
        <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>

        //定义组件component
        Vue.component(
            "qinjiang",
            {
                props: ['qin'],
                template: '<li>{{qin}}</li>'
            }
        );

        var vm = new Vue({
            el: "#app",
            data: {
                items: ["😀","😭","😠"]
            }
        });
    </script>
</body>

在这里插入图片描述

在这里插入图片描述

6.3、进阶到.vue文件

模板

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

7、axios 网络通信

实现ajax异步通信

在这里插入图片描述

官网：http://axios-js.com

CDN

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

7.1、第一个程序

data.json

{
    "name": "Happy~Study🧐",
    "url": "https://www.cnblogs.com/happy-msh/",
    "page": 1,
    "isNonProfit": true,
    "address": {
        "street": "三峡大学",
        "city": "湖北宜昌",
        "country": "中国"
    },
    "links": [
        {
        "name": "B站",
        "url": "https://space.bilibili.com/95256449"
        },
        {
        "name": "我的博客",
        "url": "https://www.cnblogs.com/happy-msh/"
        },
        {
        "name": "百度",
        "url": "https://www.baidu.com/"
        }
    ]
}

<body>
	<div id="vue"></div>
	<!--引入js文件-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
	    var vm = new Vue({
	        el:"#vue",
	        mounted(){//钩子函数
	            axios.get('data.json').then(response=>(console.log(response.data)));
	        }
	    });
	</script>
</body>

data.json 实现了ajax的异步刷新：在这里插入图片描述

在这里插入图片描述

7.2、进阶版

<head>
<!-- v-clock:解决页面闪烁问题 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>

    <a v-bind:href="info.url">点😀进入❤️世界</a>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#vue",
        data(){
            return{
                //请求返回参数合适，必须和json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){//钩子函数,链子编程
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    });
</script>

在这里插入图片描述

8、计算属性

计算出来的结果，保存在属性中

可以想象成缓存

<body>
<div id="app">
    <p>currentTime2:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data: {
            message: 'Happy~Study😀'
        },
        methods: {
            currentTime1: function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性，建议不要和 methods 方法重名，因为重名后只会调用 methods 里面的方法
            //节省浏览器的成本，不需要多次调用方法，在缓存去拿就行
            currentTime2: function(){
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>

在这里插入图片描述

一个是方法，一个是属性

9、插槽 slot

承载分发内容的出口，即内容分发

<body>
<div id="app">

    <!-- 改用插槽实现 -->
    <!-- <p>书籍目录</p>
    <ul>
        <li>Java</li>
        <li>Mybatis</li>
        <li>Python</li>
    </ul> -->

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    Vue.component("todo",{
        // slot 定义插槽 实现动态编辑
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<p>{{title}}</p>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data: {
            title: "秦老师系列列表",
            todoItems: ['狂神说Java','狂神说前端',"你好"] //前端就只需要在这改动数据就行，就会在对应位置插入数据
        }
    });
</script>
</body>

10、自定义事件

this.$emit(‘自定义事件名’,参数)

实现参数传递与事件的并发

<body>
<div id="app">

    <!-- 改用插槽实现 -->
    <!-- <p>书籍目录</p>
    <ul>
        <li>Java</li>
        <li>Mybatis</li>
        <li>Python</li>
    </ul> -->

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!-- v-bind:title  => 简写： :title -->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    // 组件
    Vue.component("todo",{
        // slot 定义插槽 实现动态编辑
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],//传参
        template: '<p>{{title}}</p>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],//传参
        // @ => v-on
        template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove: function(index){
                //
                this.$emit('remove',index);
            }
        }
    });

    // Vue 实例
    var vm = new Vue({
        el:"#app",
        data: {
            title: "秦老师系列列表",
            todoItems: ['狂神说Java','狂神说前端',"你好"] //前端就只需要在这改动数据就行，就会在对应位置插入数据
        },
        methods: {
            removeItems: function(index){
                console.log("删除了" + this.todoItems[index] + "OK");
                this.todoItems.splice(index,1);//一次只删除一个元素
            }
        }
    });
</script>
</body>

在这里插入图片描述

在这里插入图片描述

思路：

在这里插入图片描述

11、总结

核心：数据驱动，组件化

常用属性

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on 绑定事件，简写**@**
  • v-model 数据双向绑定
  • v-bind 给组件绑定参数，简写 :

组件化

  • solt 插槽，组合组件
  • this.$emit(‘自定义事件名’,参数); 组件内部绑定事件需要用到
  • 计算属性的特色，缓存计算数据

12、第一个vue-cli项目

vue-cli是一个脚手架

12.1、安装NodeJS

官网：http://nodejs.cn/

在这里插入图片描述

12.2、安装vue-cli

安装加速器：https://blog.csdn.net/m0_46462506/article/details/118641566?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162851321916780269846081%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162851321916780269846081&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-118641566.first_rank_v2_pc_rank_v29&utm_term=npm+install+cnpm±g&spm=1018.2226.3001.4187

安装vue-cli：cnpm install vue-cli -g

测试：vue list

需要创建的文件地址下，用cmd创建项目：vue init webpack myvue

在这里插入图片描述

12.3、初始化并运行

cmd

  • cd myvue 到这个文件下下载
  • npm install 下载
  • npm run dev 运行
    • 关闭直接：ctrl + c

​ 在 idea 下打开文件后，改动 HelloWorld.vue文件的 template 标签下的内容，然后在 idea 最下面位置的 Terminal 处输入 npm run dev 即可产生如下效果

在这里插入图片描述

13、Webpack学习使用

是一款模块加载器兼打包工具，他能把各种资源作为模块来处理和使用

13.1、安装Webpack

cmd：

  • npm install webpack -g
  • npm install webpack-cli -g

在这里插入图片描述

13.2、配置

创建 webpack.config.js 配置文件

  • entry：入口文件，指定webpack用哪个文件作为项目的入口
  • output：输出，指定webpack把处理完成的文件放置到指定路径
  • module：模块，用于处理各种类型的文件
  • plugin：插件，如：热更新，代码重用等
  • resolve：设置路径指向
  • watch：监听，用于设置文件改动后直接打包

模板：

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    }
    module: {
    	loaders: [
    		{test: /\.js$/, loader: ""}
    	]
	},
    plugins: {},
    resolve: {},
    watch: true
}

13.3、第一个webpack程序

在这里插入图片描述

  1. main.js

    //主入口
var hello = require("./hello");//相当于创建一个对象，下面就可以调用对象中的方法
hello.sayHi();

  2. hello.js

    //暴露一个方法,类似与 Java 类中的 public，就是写函数
exports.sayHi = function () {
    document.write("<h1>Happy~Study😀</h1>")
}

  3. webpack.config.js

    module.exports = {
    entry:'./modules/main.js',//入口
    output:{
        filename:"./js/bundle.js"//不要自己写文件，在Terminal处输入webpack打包即可产生文件
    }
};

  4. index.html

    <body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>

  5. 结果：在这里插入图片描述

14、vue-router路由

14.1、安装

cmd

  • install vue-router --save-dev

干净的项目：在这里插入图片描述

  1. App.vue

    <template>
  <div id="app">

  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld'

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>

  2. main.js

    import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router";

Vue.config.productionTip = false

//显示声明使用 VueRouter
Vue.use(VueRouter);

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

14.2、第一个vue-router程序

  1. App.vue

    <template>
  <div id="app">
    <h1>Happy~Study😀</h1>
    <!--router-link 就是类似与 a 标签-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!--显示内容-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

    前端显示：在这里插入图片描述

  2. main.js

    import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

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

  3. Content.vue

    <template>
  <div>
    <h1>内容</h1>
  </div>
</template>

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

<!--scoped : 指定只在当前作用域有用-->
<style scoped>

</style>

  4. Main.vue

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

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

  5. index.js

    import Vue from "vue";
import VueRouter from "vue-router";

import Content from "../components/Content";
import Main from "../components/Main";
import Happy from "../components/Happy";
import App from "../App";

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

//配置导出路由
export default new VueRouter({
  // 千万别写成 routers
  routes: [
    {
      // 路由路径，就是页面跳转
      path: '/content',
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
      // 路由路径，就是页面跳转
      path: '/main',
      name: 'main',
      // 跳转的组件
      component: Main
    }
  ]
});

  6. 结果在这里插入图片描述

15、vue+elementui

cmd

  1. 创建工程

    vue init webpack hello-vue

在这里插入图片描述

  1. 打开工程目录

    cd hello-vue

    在这里插入图片描述

  2. 安装 vue-router

    npm install vue-router --save-dev

  3. 安装 element-ui

    npm i element-ui -S

  4. 安装依赖

    npm install

  5. 安装SASS加载器

    cnpm install sass-loader node-sass --save-dev

  6. 启动测试

    npm run dev

main.js

import Vue from 'vue'
import App from './App'

import router from './router'

Vue.config.productionTip = false

//导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(router);
Vue.use(ElementUI);
Vue.use(VueAxios,axios);

new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
});

index.js

import Vue from "vue";
import Router from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

import UserProfile from "../views/user/Profile";
import UserList from "../views/user/List";
import NotFound from "../views/NotFound";

Vue.use(Router);

export default new Router({
  mode: 'history', //解决 http://localhost:8080/#/login 中的 # ，让其变成 http://localhost:8080/login
  routes:[
    {
      path: '/main/:name',
      component: Main,
      props: true,
      children: [// 路由嵌套
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile,
          props: true
        },
        {
          path: '/user/list',
          component: UserList
        },
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/goLogin',
      redirect: '/login'
    },
    {
      path: '*',
      component: NotFound
    }
  ]
});

15.1、路由嵌套

path: '/main/:name',
component: Main,
props: true,
children: [// 路由嵌套
    {
      path: '/user/profile/:id',
      name: 'UserProfile',
      component: UserProfile,
      props: true
    },
    {
      path: '/user/list',
      component: UserList
    },
]

效果

在这里插入图片描述

15.2、参数传递

path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile,
props: true

<template>
  <div>
    <h1>个人信息</h1>
    <!--{{ $route.params.id }} //组件后面配置了props就不需要这样了-->
    {{id}}
  </div>
</template>
<script>
export default {
    props: ['id'],//传参
    name: "UserProfile"
}
</script>

效果

在这里插入图片描述

15.3、重定向

path: '/goLogin',
redirect: '/login'

15.4、404

path: '*',
component: NotFound

在这里插入图片描述

15.5、路由钩子

使用 axios 实现异步

  1. 安装：cmd ：cnpm install axios -s
  2. main.js 绑定

Profile.vue

<script>
export default {
  props: ['id'],//传参
  name: "UserProfile",
  //进入路由之前执行
  /* 拦截器
    to:路由将要跳转的路径信息
    from:路由跳转前的路径信息
    next:路由的控制参数
      next(); 跳到下一个页面
      next('/path') 改变路由的跳转位置，使其跳转到另外一个路由
      next(false) 返回原来的界面
      next((vm)=>{}) 仅在 beforeRouterEnter 中可用，vm 是组件实例
   */
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由前");// 加载数据
    next(vm => {
      vm.getData();// 进入路由之前执行方法
    });
  },
  //离开路由之前执行
  beforeRouteLeave:(to, from, next)=>{
    console.log("离开路由前");
    next();
  },
  methods:{
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
        console.log(response);
      });
    }
  }
}
</script>

效果

在这里插入图片描述

我的博客园：https://www.cnblogs.com/happy-msh/

Happy(*^_^*)
关注
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
分析vue2.6.12源码
MiemieWan的博客
05-11 879
一、调试环境搭建 1.拉取源码 git clone https://github.com/vuejs/vue.git 2.全局安装rollup：vue打包用rollup，开发时打包用webpack npm i -g rollup 3.安装依赖 npm i 4.在package.json中scripts.dev中添加--sourcemap，用于调试代码时查找源码 "dev": "rollup -w -c scripts/config.js --sourcemap --environm.
vue中执行npm install提示：npm WARN deprecated core-js@2.6.12
喜羊羊love红太狼
01-04 9759
npm WARN deprecated
webpackage依赖安装报错ERESOLVE unable to resolve dependency tree
热门推荐
黑白奥利奥的博客
02-04 3万+
报错信息: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: vue@2.6.12 npm ERR! node_modules/vue npm ERR! vue@"^2.6.11" from the root project npm ERR! peer vue@"^2 || ^3.0.0-0" from @vue/babel-preset-app@4.
webstorm vue 2.6.12 @路径不能跳转到对应资源
qq56477643的博客
03-14 492
代码里 vue.config.js。
深入理解 Vue 不同构建版本的区别
Mark
04-09 2196
目录 1、两个版本的相关介绍 2、运行时+编译器 vs 只包含运行时 3、template 和 render 的使用区别 4、用 codesandbox.io 写 Vue 代码 1、两个版本的相关介绍 首先你要了解如何创建一个 Vue 项目，如果你还不熟悉的话，可以移步到这里：传送门。创建 Vue 项目的过程中会涉及到 Vue 两个不同版本的选择：（1）完整版：vue.js、（2）只包...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
FEProjectDemos:Vue学习中使用的demo
05-19
Vue学习系列（7/7） Vue源码学习系列（8/15） ElementUI源码学习系列（4/8） mint ui源码学习系列 Vuex 源码学习系列 vue-router 源码学习系列 weex 源码探究 Vue 相关技术栈用法和源码学习系列 …… Plan 今年目标...
vue学习资料.rar
10-22
这份"vue学习资料.rar"压缩包显然包含了帮助学习Vue.js的各种资源。 1. **数据绑定**：Vue.js 的核心概念之一是双向数据绑定，这使得视图与模型之间的数据变化可以实时同步。通过`v-model`指令，我们可以轻松地在...
vue-2.6.12:用于学习 vue2.x 源码的仓库，注释直接写在源码内的
04-18
src 下的目录 platforms：提供给不同平台的 vue 版本入口 不带 template 编译器（不支持 template 属性，只支持 render）的 vue 版本入口文件：platforms\web\runtime\index.js 带 template 编译器的 vue 版本入口文件：platforms\web\entry-runtime-with-compiler.js patch 函数入口文件：platforms\web\runtime\patch.js 编译相关入口文件：platforms\web\compiler\index.js core：vue 主要流程代码 vue 导出主要出口文件：core\index.js vue 全局 api 入口文件：core\global-api\index.js vue 实例 api 入口文件：core\instance\index
Vue.jsv2.6.12.rar
05-07
Vue.jsv2.6.12.rar
vue.js2.6.12下载
09-30
vue.js2.6.12下载，只需引用该js到项目中，就可以使用vue了....................................
Vue.js2.6
12-29
2.6 vue
Vue源码解析系列——模板编译篇：parse编译不同标签
hd101367816的博客
03-03 431
准备 vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。 模板编译的入口 在runtime+compiler版本中，Vue再执行挂载操作时，会调用为runtime+compiler版本特别定制的$mount方法，这个方法主要是将模板template编译为可执行的render函数。所以，整个Vue的模板编译入口就在这个$mount中。 $mount const { render, staticRenderFns } = compileToFunctions(template,
vue初级
Alexuuu的博客
05-02 563
Vue快速入门 Vue介绍 在互联网产品快速迭代的背景下，前端开发人员不仅要编写页面，还要通过ajax+js完成页面动态效果，压力较大。 为了解决这个问题，一款前端的渐进式框架==Vue==就诞生了。 ==渐进式框架==：一个前端项目可以使用vue一两个特性，也可以整个项目都用vue。 入门案例 需求：视图Div获取input中输入的文字 创建工程 导入资源 js代码 <!DOCTYPE html> <html lang="zh-CN"..
vuex的使用
qq_45174781的博客
08-11 182
Vuex的快速入门 快速开始_ 安装依赖 "vuex": "3.6.0" 在store下添加index.js,然后再main.js引入 store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 定义共享变量，所有页面都可以访问到，类似于data state: { }, // 定义同步方法 mutations
Vue 安装
LMGD的博客
04-14 2041
Vue 安装官网地址： 安装 — Vue.js 1、直接 <script> 引入 2、NPM安装 1、直接 <script> 引入 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 开发版本下载：https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js 生产版本下载：https://cdn.jsdelivr.net/npm/vue@2.6.14 vuetest.html 页面...
Vue的第一天的学习
weixin_50703176的博客
10-03 257
vue简介 1.什么是vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 2.vue的特性 数据驱动视图 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。 好处：当页面数据发生变化时，页面会自动重新渲染！ 注意：数据驱动视图是单向的数据绑定。 双向数据绑定 在网页中form表单负责采集数据，Ajax负责提交数据 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据
尚硅谷vue学习笔记
最新发布
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值