Vue入门

最新推荐文章于 2021-11-27 14:55:52 发布
最新推荐文章于 2021-11-27 14:55:52 发布
阅读量495 收藏 1
点赞数
分类专栏： JAVA课程学习 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41997237/article/details/121376429
版权

1. Vue概述

MVVM模式通过视图与模型的双向绑定简化前端操作，渐进式框架

2. 搭建工程

vue前端框架，是一个js文件；下载js文件并在页面中引用

vue.js下载方式：

  • 引用在线vue.js
  • 离线下载vue.js
  • npm包资源管理器，可以下载vue.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入本地vue-->
    <script src="vue/vue-2.6.10.js"></script>
    <!--Vue-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>

<div id="app">
    <h2>{{name}}程序员</h2>   <!--插值-->

    <input type="text" v-model="num">   <!--input 和 num , 通过 v-model 双向绑定-->
    <button v-on:click="num++">点击</button>   <!-- v-on 绑定点击事件，每次点击 num++ -->
    <h2>数量为{{num}}</h2>
</div>

<script>
    var app = new Vue({
        el:"#app",   <!--要渲染的页面元素为 app-->
        data:{
            name:"Java",
            num:1
        }
    });
</script>
</body>
</html>

3.Vue实例生命周期及钩子函数

创建实例可以指定模板id、数据和方法
在实例化、模板渲染过程中操作可以使用钩子函数

钩子函数：是在Vue实例生命周期过程中的不同阶段，钩子函数通过一些特定的函数对vue实例进行操作。
具体生命周期及钩子函数请参考：https://blog.csdn.net/focusmickey/article/details/108750466
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>

<div id="app">
    信息是：{{msg}}
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        <!--钩子函数 created() -->
        created(){
            this.msg= "Vue实例初始化msg为空，通过created()钩子函数进行操作赋值";
            console.log(this);  <!--打印出this，应该是vue实例对象-->
        }
    });
</script>
</body>
</html>

4. 插值、v-text、v-html

Vue的指令：v-
插值格式：

{{表达式}}

在网速较慢时，可能会出现原始的 {{}} ，加载完毕后才会显示正确数据。插值闪烁

v-text,v-html可以解决插值闪烁
还可以将数据输出到元素内部，如果有html代码，v-text普通文本输出，v-html会将html标签渲染。
单向绑定将数据输出到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    {{msg}} <br>
    v-text:<span v-text="msg"></span><br>  <!-- 输出普通文本 -->
    v-html:<span v-html="msg"></span><br>  <!-- 输出渲染后的html -->
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            msg:"<h2>Vue</h2>"
        }
    });
</script>
</body>
</html>

5.指令 v-model

双向绑定：视图和模型中数据相互影响
可使用的元素有：

  • input
  • select：定义下拉列表
  • textarea：多行的文本输入
  • checkbox：复选框
  • radio：单选
  • components(vue中的自定义组件)
  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select单选对应字符串，多选对应也是数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>

<div id="app">
    <input type="checkbox" value="0" v-model="lag">0<br>
    <input type="checkbox" value="1" v-model="lag">1<br>
    <input type="checkbox" value="2" v-model="lag">2<br>
    <input type="radio" value="4" v-model="rad">4<br>
    {{lag.join(",")}}

</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            lag:[],
        }
    });
</script>
</body>
</html>

6.指令 v-on

页面元素绑定事件
格式：

v-on:事件名="js片段或函数名"
 v-on:click='add'
@事件名="js片段或函数名"
 @click='add'

事件修饰符：

  • .stop ：阻止事件冒泡
  • .prevent ：阻止默认事件发生
  • .capture ：使用事件捕获模式
  • .self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once ：只执行一次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="num++">增加</button>
    <button @click="dec">减少</button>
    num = {{num}}  <br>
    事件冒泡测试<br>
    <!--在点击button是，也会父事件点击div，但只想输出点击button，不执行父事件，通过事件修饰符-->
    <div style="background-color: lightgreen; width: 100px; height: 100px;" @click="print('div被点击')">
        <button @click.stop="print('button被点击')">点我</button>
    </div>
    <br>阻止默认事件的发生--事件修饰符 不会进行跳转了<br>
    <div>
        <a href="https://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            //递减
            dec(){
                this.num--;
            },
            //打印
            print(str){
                console.log(str);
            }
        }
    });
</script>
</body>
</html>

7.指令v-for使用

数组、对象遍历
可以在vue实例化的时候指定要遍历的数据，通过v-for在模板中遍历显示数据。一般情况下，要遍历的数据可以通过钩子函数created发送异步请求获取数据

格式：

//遍历数组
v-for="item in items"
 v-for="(user, index) in users"    //index索引号
//遍历对象
v-for="value in object" 
v-for="(value,key) in object" 
v-for="(value,key,index) in object"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <ul>  <!--无序列表标签-->
        <li v-for="(user,index) in users">  <!--index索引号-->
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value,key,index) in person">
            {{index}}--{{key}}--{{value}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"张三","age":10,"gender":"男"},
                {"name":"李四","age":11,"gender":"女"},
                {"name":"王五","age":12,"gender":"男"}
            ],
            person:{"name":"对象","addres":"上海","age":20}
        }
    });
</script>
</body>
</html>

key是唯一标识，key一般使用在遍历完后，又增、减集合元素

<ul><li v-for="(item,index) in items" :key="index"></li> </ul>

8.指令v-if 和 v-show使用

通过判断实现内容的隐藏
格式：

v-if="布尔表达式"
v-show="布尔表达式"

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-if在条件不满足时，元素不存在
v-show条件不满足时，只是对条件进行隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <button @click="show=!show">点击</button>
<!--    v-if-->
    <h2 v-if="show">
        Vue!
    </h2>
    <hr>
<!--  v-if  v-else-->
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='男'" style="background-color: lightgreen">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else style="background-color: red">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
<!--    v-show-->
    <h2 v-show="show">
        v-show
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show:true,
            users:[
                {"name":"张三","age":10,"gender":"男"},
                {"name":"李四","age":11,"gender":"男"},
                {"name":"王五","age":12,"gender":"女"}
            ]
        }
    });
</script>
</body>
</html>

9.指令v-bind

在元素的属性上使用vue实例的数据

<img src=" "  height=" " />
如果src和height属性不想写死，而是通过获取vue实例中数据属性值，使用v-bind

格式：

<img v-bind:src="vue实例中数据属性名" :height="vue实例中数据属性名" />
可以直接 ： 简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            color: yellow;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='green'">绿色</button>
    <div :class="color">
        v-bind:  简写 ：
    </div>
    <hr>
    <button @click="bool=!bool">切换颜色</button>
    <div :class="{red:bool,green:!bool}">
        clss属性的特殊用法
    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            bool:true
        }
    });
</script>
</body>
</html>

10.计算属性

日期的毫秒值进行格式化(yyyy-MM-dd)字符串，使用computed计算属性中的方法进行处理
计算属性的方法必须有返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <h2>
        日期为：{{day}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            daynum:2429032123201
        },
        computed:{
            day(){
                const d = new Date(this.daynum);
                return d.getFullYear() +"-"+(d.getMonth()+1)+"-"+d.getDay();
            }
        }
    });
</script>
</body>
</html>

可以用在插值或制定表达式复杂的时候，可以把属性数据经过方法处理之后返回

11.watch基本和深度监控

vue实例中数据属性，在页面中修改而产生了变化，可以通过watch监控获取改变前后的值
如果修改的是对象属性，可以开启深度监控获取修改后最新的对象数据。如；person.name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <hr>
    <input type="text" v-model="person.name">
    <hr>
    <input type="text" v-model="person.age"><button @click="person.age++">+</button>
    <br>
    <h2>
        姓名：{{person.name}};年龄:{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"0",
            person:{"name":"lisi","age":13}
        },
        watch:{
            //监控数据属性
            message(oldVlue,newVlue){   //监控变量的方法名要和数据属性变量名一致
                console.log("new:"+newVlue);
                console.log("old:"+oldVlue);
            },
            //对象监控
            person: {       //与对象属性名一致
                //需开启深度监控：监控对象属性变化
                deep:true,
                //handler方法 obj可以获取到最新属性数据
                handler(obj){
                    console.log("name:"+obj.name + " age:" + obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

watch使用场景：可以监视视图中数据变化而做出响应。如：下拉框列表中，选择了对应的下拉框选项之后，要根据最新的值去加载一些其他数据。

12.组件

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部
导航。
但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同
页面就可以共享这些组件，避免重复开发。

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等。
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data的定义方式比较特殊，必须是一个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<!--    //使用组件-->
    <counter></counter>
</div>
<script type="text/javascript">
    //定义组件
    const count = {
        template:"<button @click='num++'>点击{{num}}次</button>",   //模板
        data(){   //data定义方式是一个函数
            return {num:0}
        }
    };
    //全局注册组件：在所有vue实例中都可以使用
    //参数1：组件名   参数2:具体组件
    //Vue.component("counter",count);

    var app = new Vue({
        el:"#app",
        //局部注册   //这个counter组件只能在当前的Vue实例中使用
        components:{
            counter:count
        }
    });
</script>
</body>
</html>

全局注册：在所有vue实例中都可以使用。eg：头部导航菜单
局部注册：组件只能在当前的Vue实例中使用

13.父组件向子组件通信

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

传递普通字符串：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <introduce :title="msg"></introduce>
</div>
<script type="text/javascript">
    //定义组件
    const introduce = {
        template: "<h2>{{title}}</h2>>",
        //定义接收父组件的属性
        props:["title"]
    };
    //全局注册组件
    Vue.component("introduce",introduce);

    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg内容"
        }
    });
</script>
</body>
</html>

传递数组或者对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <!--定义的组件myList有大写字母-->
    <my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">
    //定义组件
    const myList = {
        template:`
            <ul>
            <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li>
            </ul>`,
        //定义接收父组件的属性
        props:{
            items:{
                //数据类型：数组-Array；对象--Object
                type:Array,
                default:[]
            }
        }
    };

    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件msg属性数据",
            lessons:[
                {"id":1,"name":"lisi"},
                {"id":2,"name":"zs"},
                {"id":3,"name":"ww"}
            ]
        },
        components:{
            myList    //组件名和定义的名称一样可简写
        }
    });
</script>
</body>
</html>

default，如果是对象则需要写成方法的方式返回默认值。如：
default(){
return {"xxx":"默认值"};
}

14.子组件向父组件通信

点击按钮改变父组件中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件向父组件通信</title>
    <script src="vue/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
    <h2>{{num}}</h2>
</div>
<script type="text/javascript">
    //定义组件
    const counter = {
        <!--只能有一个根元素，所以用 div对其进行包裹-->
        template:`
            <div>
                <button @click="incrnum">+</button>
                <button @click="decrnum">-</button>
            </div>
        `,
        props:["snum"],
        methods: {
            incrnum(){
                //调用父组件中的方法
                return this.$emit("plus");  //有数据需要接受的话   this.$emit("plus"，123)； 相应的定义方法中要有形参
            },
            decrnum(){
                return this.$emit("reduce");
            }
        }
    };

    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        components:{
            counter
        },
        methods:{
            numPlus(){
                this.num++;
            },
            numReduce(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>

15.axios

发送异步请求获取数据，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue-2.6.10.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">{{user.id}}--{{user.name}}</li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data: {
            users:[]
        },
        create(){
            //钩子函数，初始化数据
            axios.get("data.json").then(res=>{
                console.log(res);
                app.users = res.date;  //在axios回调函数中不能用 this，表示窗口
            }).catch(err=>alert(err));
        }
    });
</script>
</body>
</html>

注意：如果不是一个服务器可能会出现跨域请求
跨域：在前端js中发送异步请求，请求的地址与当前服务器ip或者端口号不同都是跨域请求，在服务器端配置@CrossOrigin

zcd_2020
关注
专栏目录
vue安装及入门
weixin_63104855的博客
04-25 1540
Vue安装及入门
vue-2.6.10版本源代码断点调试方法
泥猴桃的博客
12-15 1509
版本： vue-2.6.10, 一定要保证版本一致 因为最开始调试源码的时候下载的是这个版本，后来在百度上找到的一些方法，发现那些方法都是一两年前的，根本不管用了，因为版本迭代，vue源码的配置已经变了！ 1，先在github上找到vue源码 连接：https://github.com/vuejs/vue/tree/v2.6.10 然后切换到2.6.10版本上再clone 2，安装依赖，修改配置...
Vue.js 版本：v2.6.10
10-20
Vue.js为方便使用放上的，可以自行去官网下载其他版本的内容。 vue学习地址https://blog.csdn.net/baidu_41690072/article/details/102650675
Vue.js 基础语法之指令详解
柯晓楠
11-27 674
1 Vue 的安装与使用 1.1、引入vue.js 下载 vue.js 在项目中引入 Vue 有很多种方法，其中最简单的就是使用 <script> 标签引入。如果是在静态 HTML 文件中直接使用 Vue ，可以先去 Vue 的官网下载 vue.js 文件，然后再 HTML 文件中引入下载好的 vue.js 文件。 访问 Vue 官网 https://cn.vuejs.org/ ，或者是直接下面的超链接下载不同版本的 vue.js 文件： 点击下载开发版本 点击下载生产版本 在开发环境下不要使
初始Vue.js,安装vue.js的方式
qq_41525746的博客
11-14 374
Vue是一套基于MVVM模式的用于构建用户界面的JavaScript框架，它是以数据驱动和组件化的思想构建的，它是由前谷歌人员尤雨溪开发的。 ViewModel是vue框架的核心，他是一个Vue实例。Vue实例作用于某一个HTML元素上的，这个元素可以是HTMl的body元素，也可以是某个指定了id的元素。 当创建了ViewModel后，从View侧看，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更.
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
ppt课件-第1章 Vue入门.zip
03-22
本课件“ppt课件-第1章 Vue入门.zip”是针对初学者设计的，旨在帮助学习者快速掌握Vue的基础知识和核心概念。 在Vue.js中，主要知识点包括： 1. **MVVM模式**：Vue采用Model-View-ViewModel架构，提供数据绑定和...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
vue-2.6.10.zip
09-04
最新版的Vue2.6.10压缩包，Vue.js位于里面的dist文件夹里面。学新版Vue语法的同学可以下载来用一下
v2.6.10.zip
08-30
vue 2.6.10.zip 现在好像没法设置免费的了
vue.js-2.6
12-22
目前是vue.js的最新版本，欢迎大家使用。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
vue.js2.6.12下载
09-30
vue.js2.6.12下载，只需引用该js到项目中，就可以使用vue了....................................
vue.min-2.x.js
08-18
vue.js
vue生命周期转
浅夏博客
10-20 335
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
配置webpack4.34.0+vue2.6.10+bable-loader8.0.6
xpaqd的博客
07-15 782
//package.json文件 { "name": "01.webpack-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", ...
vue 入门 demo
最新发布
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： ...这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值