vue从入门到放弃

已于 2022-11-04 17:03:11 修改
阅读量290 收藏 1
点赞数 2
分类专栏： 笔记 文章标签： vue
于 2021-03-22 23:02:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42764269/article/details/115102937
版权

文章目录

一、vue环境安装

1、初始化npm

npm init -y

2、安装

npm install vue

或者

yarn add vue

二、入门案例

1.创建vue实例，关联页面模型，将自己的数据（data）渲染到关联的模板，是响应式的
2.用指令来简化对dom的一些操作
3.声明方法来做跟复杂的操作,methods里面可以封装方法。

注意: 在使用的时候别忘了把<script src = "../node_modules/vue/dist/vue.js">引入

    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消点赞</button>
        <h1> {{name}},真帅,有{{num}}给他点赞</h1>
    </div>
    <script>
        //1.声明式渲染
        let vm = new Vue({
            el: "#app",  //绑定元素
            data: {  //封装数据
                name: "zhangsan",
                num: 1
            },
            methods:{ //封装方法
                cancle(){
                    this.num--
                }
            }
        })
        //2.双向绑定，模型变化，视图变化，反之亦然 v-model
        //3.事件处理 v-on:
        //v-xx:指令
    </script>

三、vue的声明周期和钩子函数

在这里插入图片描述
在这里插入图片描述
对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

	<div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}一共有{{num}}个赞了</h2>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.num;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                //vue实例创建之前
                console.log("beforeCreate")
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法为加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created() {
                //vue实例创建之后
                console.log("created")
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                //挂载之前
                console.log("beforeMount");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                //挂载之后
                console.log("mounted");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                //html模板更新前
                console.log("beforeUpdate");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                //html模板更新后
                console.log("updated");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            }   
        })
    </script>

1、create 相关

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
在这里插入图片描述

2、mounted 相关

beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
在这里插入图片描述

3、update 相关

这里我们在点击
在这里插入图片描述
下面就能看到data里的值被修改后，将会触发update的操作。
在这里插入图片描述

4、destroy 相关

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

5、生命周期总结

这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

当然，还有更多，继续探索中…

四、基础使用

1、指令

1.v-html、v-text、{{}}，给标签体绑定值，是单向绑定

	<div id = "app">
	   {{msg}} {{1+1}} {{hello()}}
	   <samp v-html="msg"></samp>
	   <samp v-text="msg"></samp>
	</div>
	<script>
	   new Vue({
	       el: "#app",
	       data:{
	           msg: "<h1>hello</h>"
	       },
	       methods:{
	           hello(){
	               return "hello";
	           }
	       }
	   })
	</script>

结果：结果
2.v-bind，给标签的属性绑定值，也是单向绑定，并且v-bind可以省略，如v-bind:href写成:href

	<div id = "app">
        <a v-bind:href="link">gogogo</a>
        <!-- 也可以写成 <a :href="link">gogogo</a> -->
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                link: "https://www.baidu.com"
            }
        })
    </script>

同时v-bind对class和style加强，可以在里面写对象

	<div id = "app">
        <a v-bind:href="link">gogogo</a>
        <span :class="{active: isActive, 'text-danger': hasError}"
            :style="{color:color, fontSize:size}">你好</span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                link: "https://www.baidu.com",
                isActive: true,  //为true是会加上active类
                hasError: false,
                color: 'red',
                size: "36px"
            }
        })
    </script>

结果：结果
3.前面两个都是单向绑定的，而v-model是一个双向绑定的，一般用于表单和自定义组件

	<div id = "app">
        精通的语言：<br/>
            <input type="checkbox" v-model="language" value="Java"> Java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        选中了{{language.join(",")}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                language: []
            }
        })
    </script>

结果：结果
3.v-on用来绑定事件，同时还可以绑定事件修饰符和按键修饰符，按键值可参考按键值，同时vue抽取了常用的按键值如下示例

	<div id="app">
        <!-- 可以直接写js片段 -->
        <button v-on:click="num++">点赞</button>
        <!-- 事件指定一个回调函数，必须是vue实例里面定义的函数-->
        <button @click="cancle()">取消</button>
        <h1>有{{num}}个赞</h1>
				
		 <!--
            事件修饰符
            .stop:阻止事件冒泡到父元素
            .prevent:阻止默认事件发生
            .capture:使用事件捕获模式
            .self:只有元素自身触发的事件才执行 (冒泡或捕获都不执行)
            .once:只执行一次
        -->
        <div style="border: 1px solid red;padding: 20px;"  @click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @Click.stop="hello">
                小div
                <a href="https://www.baidu.com" @Click.prevent.stop="hello">去百度</a>
            </div>
        </div> 

		<!--
            常用按键修饰符：
            .up:上键 .diwn:下键 .left:右键 .right:左键
            .ctrl .sgift .alt .enter
            .tap .delete .esc .space 空格
        -->
        <input @keyup.space="hello" @keyup.left="num+=2" @keyup.right="num-=2" v-model="num">

        <!--
            组合键 Alt + C
        -->
        <input @keyup.alt.67="hello">

        <!--
            鼠标单击 + Ctrl
        -->
        <input @click.ctrl="num=10">
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                cancle(){
                    this.num--;
                }
            }
        })
    </script>

4.v-for
遍历时都加上:key用来区分不同的数据，可以提高vue渲染效率

	<div id="app">
        <ul>
            <!--
                1、显示user信息：v-for="item in items"
                2、获取数组下标：v-for="(item,index) in items"
            -->
            <li v-for="(user,index) in users" :key=user.name>
                {{index}}={{user.name}} <br>
                <!--
                    3、遍历对象：
                        v-for="value in Object"
                        v-for="(value,key) in Object"
                        v-for="(value,key,index) in Object"
                -->
                <span v-for="(v,k,i) in user">{{i}}={{k}}={{v}}</span>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                users:[{name: '柳岩',gender: '女', age: 23},
                {name: '张三',gender: '男', age: 28},
                {name: '杨幂',gender: '女', age: 35},
                {name: '刘亦菲',gender: '女', age: 36},
                {name: '古力娜扎',gender: '女', age: 27}]
            }
        })    
    </script>

5.v-if、v-else-if、v-else和v-show
v-if 顾名思义，条件判断，判断为true时，所在元素才被渲染。就是为false时整个元素都不见了
v-show 得到结果为true时，所在元素才被显示，就是为false时整个元素还在但是被隐藏了

	<div id="app">
        <button @click="show = !show">点我</button>
        <h1 v-if="show">v-if</h1>
        <h1 v-show="!show">!v-show</h1>
        
		<button @click="random=Math.random()">点我</button>
        <h1 v-if="random >= 0.75">大于等于0.75</h1>
        <h1 v-else-if="random >= 0.5">大于等于0.5</h1>
        <h1 v-else-if="random >= 0.2">大于等于0.2</h1>
        <h1 v-else=>小于0.2</h1>
    </div>
    <script>
        new Vue({
            el: app,
            data: {
                show: true,
                random: 1,
            },
        })
    </script>

2、计算属性

计算属性的用法和data中普通属性的用法完全一样，定义计算属性加() 但是使用计算属性时不加()，vue会缓存计算属性的结果，只要参与计算的属性值没有改变就不会重复计算

计算属性 vs method中的函数
相同点：都能通过计算获得计算后的结果
不同点：使用函数必须加() 使用计算属性不用加()，vue会缓存计算属性的计算结果只要依赖的其他属性值不变就不会重复计算，vue不会缓存函数的执行结果 所以如果多次调用函数会导致重复计算

	<div id="app">
        <ul>
            <li>西游记单价：{{xyjPrice}}，数量：<input type="number" v-model="num1"></li>
            <li>水浒传单价：{{shzPrice}}，数量：<input type="number" v-model="num2"></li>
            <!--计算属性使用-->
            <li><span>{{totalPrice}}</span>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.99,
                shzPrice: 98.00,
                num1: 1 ,
                num2: 1 
            },
            computed: {
                // 计算属性，会自己动态计算，当里面涉及到的值发生变化时会自己重新计算
                totalPrice(){
                    return this.xyjPrice*this.num1+this.shzPrice*this.num2
                }
            }
        })
    </script>

3、监听器

vue通过watch响应数据变化，当需要在数据变化时执行异步或其他操作时 使用watch监听该数据

	<div id="app">
        <ul>
            <li>西游记单价：{{xyjPrice}}，数量：<input type="number" v-model="num1"></li>
            <li>水浒传单价：{{shzPrice}}，数量：<input type="number" v-model="num2"></li>
            <!--监听器的使用-->
            <li><span>{{msg}}</span></li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.99,
                shzPrice: 98.00,
                num1: 1 ,
                num2: 1 ,
                msg: ""
            }
            watch: {
                //监听器，可以让我们监控到一个值的变化，从而做出相应的反应
                num1: function(newVal,oldVal){
                    if(newVal>3){
                        this.msg="库存超出限制";
                        this.num1=oldVal //此时会再次触发此方法
                    }else if(newVal<3){
                        this.msg = ""
                    }
                }
            }
        })
    </script>

4、过滤器的使用

对变量的原始值进行再加工再显示的函数，先将变量值交给过滤器在此位置显示处理后的新值

	<div id="app">
        <ul>
            <li v-for="user in users">
                <!--过滤器使用-->
                {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

    <script>
    
        //全局过滤器，可以在所有实例使用
        Vue.filter("gFilter",function(val){
            return val==1?"男~":"女~"
        })

        new Vue({
            el: "#app",
            data: {
                users: [{id: 1,name: "张三",gender: 1},
                        {id: 2,name: "李四",gender: 1}]
            },
            filters: {
                //定义局部过滤器，只可以在当前实例中使用
                genderFilter(val){
                    return val==1?"男":"女"
                }
            }
        })
    </script>

5、组件化

组件其实也是一个实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面元素绑定，否则就无法复用了，因此没有el属性
但是组件渲染需要html模板，所有增加了template属性，值就是HTML模板
全局组件定义完毕，在任意vue实例的html中都可以直接使用组件名称直接使用组件
data必须是一个函数，不可以是一个对象

	<div id = "app">
        <button @click="count++">被点击了{{count}}下</button>
        <!--全局组件使用-->
        <counter></counter>
        <!--局部组件使用-->
        <button_counter></button_counter>
    </div>

    <script>

        // 全局声明注册一个组件,和创建vue实例是一样的，除了一个el
        // 里面的data、computed、watch、filters等等都可以使用
        // 但是data要使用方法的方式声明，要不然会导致所有组件公用一个属性count
        Vue.component("counter",{
            template: `<button @click="count++">被点击了{{count}}下</button>`,
            data(){
                return {
                    count: 1
                }
            }
        })

        //声明一个局部组件
        const buttonCounter = {
            template: `<button @click="count++">被点击了{{count}}下</button>`,
            data(){
                return {
                    count: 1
                }
            }
        }

        new Vue({
            el: app,
            data:{
                count: 1,
            },
            components: {
                //引入实例中
                "button_counter": buttonCounter
            }
        })
    </script>

五、vue模块化开法

1、全局安装webpack

npm install -g webpack@1.13.2

2、全局安装vue脚手架

// npm
npm install @vue/cli-init -g
// yarn
yarn global add @vue/cli-init

如果报：‘vue’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。执行npm config list
在这里插入图片描述
配置环境变量：
在这里插入图片描述
在这里插入图片描述

3、初始化vue项目

vue init webpack appname ： vue脚手架使用webpack模板初始化一个appname项目

在这里插入图片描述

4、启动vue项目

npm install 下载依赖
项目中packag.json中有scripts，代表我们能运行的命令
npm start = npm run dev：启动项目
npm run build ：将项目打包

5、模块化开发

创建hello.vue组件

<template>
    <div>
        <h1>你好，{{name}}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            name: "张三"
        }
    }
}
</script>

<style>

</style>

创建路由
在这里插入图片描述

6、整合ElementUI

1、安装依赖

npm i element-ui -S

2、在主程序中引入和使用
在这里插入图片描述
3、使用

参照文档Element

一天加更一点哦！！！！！

头未秃
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js从入门到放弃.pdf
08-21
Vue.js从入门到放弃.pdf
VUE从入门到放弃的辛酸历程（持续更新）
城南蝈蝈
11-21 672
vue3.0——项目搭建 vue——使用引用方式创建项目 vue中的模板语法
Vue太难啦！从入门到放弃day01——vue基础语法
小陈工的博客
08-03 1650
因为公司的业务需要，我要从事前端方面的工作，但是对于从没做过前端的我来说，是一个很大的挑战，所以只能一点点从基础开始学习。嗯，就从Vue开始吧！看我如何从入门到放弃！
vue-快速入门
最新发布
qq_62892403的博客
07-24 1209
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
vue基础入门
weixin_58470558的博客
05-13 6667
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue基础（一）——入门
pro1822的博客
04-25 8757
Vue基础（一）——入门
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5789
Vue 入门基础篇
【uni-app】uni从入门到放弃之踩坑集合
12-21
然而，正如标题所言，“从入门到放弃之踩坑集合”，在使用uni-app进行项目开发时，新手往往会在一些细节上遇到困扰。以下将详细讨论两个主要问题：静态资源的存放位置和Vue组件的数据单向流动。 首先，关于静态资源...
Note::umbrella_with_rain_drops: 前端学习笔记，JavaScript，TypeScript，Vue，React，CSS，设计模式，数据结构，NodeJS等等。记录只是为了更好的摸鱼，从入门到放弃
04-14
└ ┘Vue 3.0 学习JavaScriptPromise 回调地狱的终结所向披靡的 async/await手把手教你跨域的无敌操作try/catch 异常捕获...JS更多的基础文章，在这里看比较方便 :backhand_index_pointing_right: 一个更适合阅
jQuery从入门到到放弃视频教程.txt打包整理.zip
03-04
5. **与ES6及其他库的结合**：随着Angular、React、Vue等现代框架的兴起，jQuery的角色有所变化，但它仍然可以在这些框架中发挥辅助作用，如用于简单的DOM操作和动画。 **jQuery与现代前端** 尽管现在许多现代前端...
vue开发文档-.zip
07-12
6. **Vue.js 从入门到放弃.pdf**：书名可能带有幽默色彩，实际上它应该是详尽地从基础知识讲到进阶技巧，帮助开发者从初学者逐步成长为高级Vue开发者。 7. **vue.js 体系结构图.png**：这是一张Vue.js框架的架构图...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue入门教程
Zz1366的博客
05-08 7148
Vue快速入门
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue2 基础入门
ClearloveYt的博客
07-03 2948
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
Vue快速入门
weixin_42732665的博客
01-31 1319
Vue快速入门
VUE超详细入门
zhangpeixuan的博客
07-10 2421
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 7245
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue源码 --- 从入门到放弃
galaa2011的专栏
01-13 7074
Vue 源码分析 本文是根据源码 Vue.js v2.0.2 进行分析，内容主要针对options中最常见数据项props、data、computed、methods、watch的工作原理及流程进行详细说明。描述上，重于关键点的罗列，部分未能详细阐述。建议与这篇文章对比学习。
Vue2Webpack2框架搭建：入门与踩坑指南
本文档主要讲述了作者在学习和搭建Vue 2.x项目时遇到的挑战与经验，特别是针对初学者在入门Vue框架时可能会遇到的问题。首先，作者强调了前端工程化的重要性，提到了React、Vue和Angular这三个框架，它们的核心概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值