Vue 入门基础知识

A-sleep

已于 2022-04-12 17:14:26 修改

阅读量997

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-02-12 22:15:02 首次发布

本文链接：https://blog.csdn.net/FellAsleep/article/details/122902881

版权

Vue 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue.js框架的基础知识，包括Vue的渐进式特性、数据驱动、组件化开发以及重要指令如v-text、v-html、v-on、v-bind等的使用。通过实例演示了Vue如何实现数据渲染、事件处理和列表渲染，帮助读者快速掌握Vue的基本用法。

摘要由CSDN通过智能技术生成

01-Vue入门

学习Vue最好的方式：查看官网文档
- https://cn.vuejs.org/

1.1-Vue介绍

Vue介绍	描述
1.Vue是一个JavaScript框架	框架：别人写好的js文件
2.作用：构建用户页面	将数据渲染到页面
3.特点：渐进式	组件式开发

1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- Vue是一个JavaScript框架
  - Vue是一个用于构建用户页面的框架
    - Vue是一个用于构建用户界面得渐进式框架
2.渐进式框架介绍
- a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的
  - 类似于Nodejs,拆分成很多个小模块
- b. 在项目中我们用到什么，就导入什么
  - 这样可以保证我们用到的最少
- c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源

1.2-Vue两个重要特点

1-数据驱动

1.数据驱动：Vue会根据数据，自动渲染页面
- 无需DOM操作，修改了对象中的数据，页面会自动渲染
- Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素
  - 虚拟DOM本质是一个js对象
  - 关于虚拟DOM了解传送门(难度较大，可以留着以后进阶学习)
    - https://www.jianshu.com/p/ce2cdd4b1f04
    - https://www.jianshu.com/p/d1afa813d566

原始的前端开发	Vue.js的前端开发
1.使用HTML+CSS搭建页面	1.使用HTML+CSS搭建页面
2.使用异步请求技术向后台请求数据	2.使用异步请求技术向后台请求数据
3.使用原生的js或者jQuery操作DOM，渲染数据	`3.Vue自动渲染数据`

2-组件化开发(盒子复用)

2.组件化开发：网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件
- 组件化开发好处
  - a. 一次定义，多处使用
  - b. 便于开发维护
    - 类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件
- 数据驱动：没有dom操作，自动渲染数据
- 组件开发：元素复用

1.3-Vue基本使用

官方文档传送门：Vue官方文档
第三方框架通用的使用步骤
- 1.导包
- 2.写HTML结构
- 3.js中初始化配置

<!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>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        {{ message }}
        <br>
        {{ name }}
        <br>
        {{ age }}
        <br>
        {{ sex }}
    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            el: '#app',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!',
                name:'坤哥',
                age:32,
                sex:'男'
            }
        })
    </script>
</body>

</html>

1.4-Vue的挂载点介绍

el挂载点官方文档传送门：https://cn.vuejs.org/v2/api/#el
1.挂载点el作用：告诉vue实例，你要将data中的数据渲染到哪一个视图
2.注意点
- (1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器
  - 开发中基本上都是id选择器，保证HTML标签唯一性
  - 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素，只会选择第一个元素
- (3)挂载点不能设置为html和body标签（程序报错）

<!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>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="hm">
        <div id="app">
            {{ message }}
        </div>

        <hr>
        <div id="box" class="container">
            {{ message }}
        </div>

        <hr>
        <div class="container">
            {{ message }}
        </div>
    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#hm',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

vue的挂载点el作用告诉VUE 渲染哪个盒子

vue的挂载点使用什么选择器最好 id 如果可以选择多个盒子,vue只会渲染第一个

vue的挂载点el不能给什么标签设置挂载点不支持 body 和html 否则会报错

1.5-Vue的插值表达式介绍

插值表达式(模板语法)官网文档传送门：https://cn.vuejs.org/v2/guide/syntax.html
- 插值表达式 有点类似于以前学习的 art-template模板语法，但是不同的框架有自己不同的语法规则
1.Vue会自动将data对象中的数据渲染到视图
2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置
3.关于插值表达式一些注意点
- (1) {{ }} : 插值表达式，也叫胡子语法
- (2) 插值表达式作用：将数据渲染到页面
- (3) 支持二元运算 {{ age + 1 }}
- (4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
- (5) 支持数组与对象的取值语法
- (6) 不支持分支语法与循环语法

<!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>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        名字： {{ name }}   <br>
        年龄： {{ age + 1 }} <br>
        介绍： {{ age>30?'大叔':'欧巴' }}  <br>
        女朋友：{{ girlFried[1] }} <br>
        女儿： {{ daughter.name }} <br>

    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#app',
            //data: 要渲染的数据 
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作)
            (1)  {{ }} : 插值表达式，也叫胡子语法
            (2)  插值表达式作用：将数据渲染到页面
            (3)  支持二元运算   {{ age + 1 }}
            (4)  支持三元运算   {{ age>30?'老男人':'小鲜肉' }}
            (5)  支持数组与对象的取值语法
            (6)  不支持分支语法与循环语法
            */
            data: {
                message: 'Hello Vue!',
                name: '坤哥',
                age: 32,
                sex: '男',
                girlFried:['代码','学生','咖啡'],
                daughter:{
                    name:'小布丁',
                    age:1
                }
            }
        })
        
    </script>
</body>

</html>

vue的差值语法

支持 : 数组取值,对象取值,二元运算,三元运算

不支持 : if分支和for循环

Vue指令

指令名称	指令作用	示例	简写形式
v-text	设置元素的innerText	`v-text="111"`	无
v-html	设置元素的innerHTML	`v-html="<p>111</p>"`	无
v-on	给元素绑定事件	`v-on:click="doClick"`	`@click="doClick"`
v-bind	设置元素的原生属性	`v-bind:src="./logo.png"`	`:src="./logo.png"`
v-for	列表渲染	`<li v-for=(item,index) in list></li>`	无

1.1-Vue指令介绍

Vue指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-text
1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
- a. 每一个HTML标签都有自己的原生默认属性
  - HTML标签的每一个属性都有自己独特的功能
  - 例如 img标签的src属性，a标签的href属性
- b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头（用于区分HTML标签原生属性）
- 语法： 指令名=“指令值”
  - 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

`<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick">`
`src"` : 原生属性，设置图片的路径
`alt` : 原生属性，设置图片不存在时的文本
`title`：原生属性，设置鼠标悬停文本
`v-on:click`:vue给img标签新增的属性, 给元素绑定点击事件

问题1：指令是vue框架的核心功能之一，请说出指令的作用？

标签新增一些功能

问题2：指令的本质是什么？

自定义属性

1.2-v-text指令

v-text指令官方文档传送门：https://cn.vuejs.org/v2/api/#v-text

<!-- 
1.学习目标 ：  v-text 指令
2.学习路线
    a.作用： 设置元素的文本 innerText
    b.与插值表达式区别
        v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
        {{ }}  只会替换当前位置文本
 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg">传智播客</p>
        <p v-text="msg1">传智播客</p>
        <p>我爱你： {{ msg }}</p>
    </div>
    <!-- 
        1.学习目标 ：  v-text 指令
        2.学习路线
            a.作用： 设置元素的文本 innerText
            b.与插值表达式区别
                v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
                {{ }}  只会替换当前位置文本

     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                msg1:'<h1>黑马程序员</h1>'
            }
        })
    </script>
</body>
</html>

1.3-v-html指令

v-html指令官方文档传送门：https://cn.vuejs.org/v2/api/#v-html

<!-- 
    1.学习目标 ：  v-html 指令
    2.学习路线
        作用： 设置元素的innerHTM
 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg">传智播客</p>
        <p v-text="msg1">传智播客</p>
        <p v-html="msg1">传智播客</p>
    </div>
    <!-- 
        1.学习目标 ：  v-html 指令
        2.学习路线
            作用： 设置元素的innerHTM
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                msg1:'<h1>黑马程序员</h1>'
            }
        })
    </script>
</body>
</html>

1.4-v-on指令（绑定事件）

1.4.1- v-on基本使用

v-on指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-on

<!-- 
    1.学习目标 ：  v-on 指令
    2.学习路线
        a.作用： 给元素绑定事件
        b.语法： 
            标准语法：     v-on:事件名 = "方法名"
            简洁语法：     @事件名 = "方法名"
        c.注意点
            事件名就是原生事件名去掉on
            事件方法定义在vue实例的methods对象中
 -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <button v-on:click="doClick">点我</button>
        <div class="box" v-on:mouseenter="doEnter" v-on:mouseleave="doLeave"></div>
        <hr>
        <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
    </div>
    <!-- 
        1.学习目标 ：  v-on 指令
        2.学习路线
            a.作用： 给元素绑定事件
            b.语法： 
                标准语法：     v-on:事件名 = "方法名"
                简洁语法：     @事件名 = "方法名"
            c.注意点
                事件名就是原生事件名去掉on
                事件方法定义在vue实例的methods对象中
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //method:注册事件的方法名
            methods: {
                doClick: function () {
                    alert('我被点击了');
                },
                doEnter: function () {
                    console.log('鼠标移入我了');

                },
                doLeave: function () {
                    console.log('鼠标移出我了');
                }
            },
        })
    </script>
</body>

</html>

知识点验收

问题1：v-on指令的作用是什么？
- 给元素绑定事件
问题2： v-on指令有几种写法？
- 标准语法： v-on:事件名 = “方法名”
- 简洁语法： @事件名 = “方法名”
问题3： v-on指令使用时需要注意什么问题？

注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中

1.4.2- vue事件修饰符

vue事件修饰符官方文档传送门：事件修饰符使用

<!-- 
    1.学习目标 ：  事件修饰符
    2.学习路线
        a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
        b.语法： @事件名.修饰符 = "方法名"
 -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: #f00;
        }

        .son{

            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <div class="father" @click.once="fatherClick">
            我是father
            <div class="son" @click.stop="sonClick">我是son</div>
        </div>

        <form action="http://www.itheima.cn">
            <button @click.prevent="doSubmit">点我啊</button>
        </form>

        <!-- 输入框 ： enter键 -->
        <!-- <input type="text" @keyup.13="doUp"> -->
        <!-- 用enter,易读 -->
        <input type="text" @keyup.enter="doEnter">
    </div>
    <!-- 
        1.学习目标 ：  事件修饰符
        2.学习路线
            a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
            b.语法： @事件名.修饰符 = "方法名"
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //method:注册事件的方法名
            methods: {
                fatherClick: function () {
                    console.log('我是父元素');
                },
                sonClick: function () {
                    console.log('我是子元素');

                },
                doSubmit: function () {
                    console.log('提交按钮');
                },
                doEnter:function(){
                    console.log('按了enter键')
                }
            },
        })
    </script>
</body>

</html>

知识点验收

问题1：如何绑定enter键事件？

@keyup.enter=“dosomething”
问题2：如何阻止事件冒泡？

@click.prevent=“dosomething”
问题3：如何阻止事件默认行为？

@click.stop=“dosomething”

1.4.3- vue方法中的this

1.vue事件方法中的this指向： vue实例
2.vue事件方法中访问data对象中的成员 : this.属性名
- vue会将data对象与methods对象中的成员 平铺到 vue实例中
3.注意点：如果事件处理代码没有写到methods中，而是写在行内则不需要this
就可以访问data对象中的成员

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- HTML结构 -->
    <div id="app">
        {{ msg }} <br>
        <button @click="doClick">点我啊</button>
        <br>
        
        我的年龄：{{ age }}
        <button @click="age++">我要成长</button>

    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                age:32
            },
            methods: {
                /* 
                1. vue事件方法中的this指向 ：  vue实例
                2. vue事件方法中访问data对象中的成员 : this.属性名
                    * vue会将data对象与methods对象中的成员 平铺到 vue实例中
                3. 注意点： 如果事件处理代码没有写到methods中，而是在行内则不需要this
                就可以访问data对象中的成员
                 */
                doClick:function(){
                    console.log(this);
                    //在这个事件中，如何获取data里面的成员呢？
                    //console.log(this.data.msg);//报错 无法获取
                    console.log(this.msg);// vue会将data与methos中的成员 平铺到vue实例中
                    this.msg = '爱你么么哒';
                },
                doClick1:function(){
                    this.age++;
                }
            },
        })
    </script>
</body>
</html>

在vue的事件处理函数methods中，可能会经常使用this这个关键字，

this 指向vue实例

如果在vue的methods中使用了箭头函数，则此时this会指向谁？为什么？

不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

1.4.4- vue事件传参

1.vue中每一个事件方法都有一个默认参数，就是事件对象
2.如果主动给事件传参，则传递的参数会覆盖默认参数
3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event
- v-on:click="doClick($event,自定义参数)"

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        {{ msg }}
        <div class="box" @click="boxClick(10)"></div>
        <br>
        <span v-text="news.title"></span>
        <button @click="deleteClick(news.id)">删除</button>
        <button @click="editClick($event,news.id)">编辑</button>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是坤坤!',
                news:{
                    title:'港独分子的下场就是牢底坐穿!',
                    id:10
                }
            },
            methods: {
                /* 
                1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象
                2.如果主动给事件传参，则传递的参数 会 覆盖默认参数
                3.如果希望 传递事件对象 + 自定义参数， 则可以使用 $event
                */
                boxClick:function(e){
                    console.log(e); 
                },
                deleteClick:function(id){
                    console.log(`id为${id}的文章被删除`); 
                },
                editClick:function(e,id){
                    console.log(e);
                    console.log(id);
                    
                    
                }
            },
        })
    </script>
</body>
</html>

1.5-v-bind指令 (绑定标准属性的值)

v-bind指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-bind
- 默认情况下，HTML标签原生属性无法获取vue中的数据
- 如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令

1.5.1-v-bind指令基本使用

<!-- 
    1.学习目标 ：  v-bind 指令
    2.学习路线
        a.作用： 设置HTML标签原生属性的值
        b.语法： 
            标准语法：     v-bind:原生属性名 = "属性值"
            简洁语法：     :原生属性名 = "属性值"
 -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!--
            默认情况下，HTML标签原生属性无法获取vue中的数据 
            如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
         -->
        <img v-bind:src="imagePath" v-bind:title="imageTitle"  alt="">
    </div>
    <!-- 
        1.学习目标 ：  v-bind 指令
        2.学习路线
            a.作用： 设置HTML标签原生属性的值
            b.语法： 
                标准语法：     v-bind:原生属性名 = "属性值"
                简洁语法：     :原生属性名 = "属性值"
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                imagePath:'./images/logo.png',
                imageTitle:'黑马程序员'
            }
        })
    </script>
</body>

</html>

1.5.2-vue样式绑定

class与style样式绑定官方文档传送门：https://cn.vuejs.org/v2/guide/class-and-style.html
- v-bind 可以简写成 :

v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点：如果类名有 - ，则需要使用引号包起来

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        div>div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 20px;
        }

        .red-box {
            background-color: red;
        }

        .blue-box {
            background-color: blue;
        }

        .greenBorder {
            border: 10px solid green;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 本小节内容：Vue设置元素CSS样式的3种方式 -->

        <!--  v-bind:class="{ '类名': bool, '类名': bool ......}"
                如果值为true 该类样式就会被应用在元素身上, false则不会
                注意点：如果类名有 - ，则需要使用引号包起来
        -->
        <button @click="changeClass">切换样式</button>
        <div :class="{ greenBorder: true, 'blue-box': flag }"></div>
        <hr>
        
    </div>
    
    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag:true,
            },
            methods: {
                changeClass:function(){
                    this.flag = !this.flag;
                }
            },
        })
    </script>
</body>

</html>

让原生属性也可以获取vue中的数据，就可以使用v-bind指令
v-bind指令在使用时有什么需要注意的地方?如果类名有 - ,则需要加’ ’

1.6-vue指令案例：购物车加减

Vue编程思维
- (1)写页面结构 HTML+CSS
- (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
- (3)在页面视图中使用插值语法或者指令显示data中的数据

1.6.1-计数器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        .input-num {
            width: 180px;
            height: 40px;
            border: 1px solid gray;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
        }

        .input-num button {
            width: 50px;
            height: 100%;
            font-size: 25px;
            color: gray;
            cursor: pointer;
        }

        .input-num span {
            height: 100%;
            border: 1px solid gray;
            flex: 1;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 计数器 -->
        <div class="input-num">
            <button @click="minus" :disabled="minusDisabled" >
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add"   :disabled="addDisabled">
                +
            </button>
        </div>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num: 0,
                minusDisabled: true,
                addDisabled: false
            },
            methods: {
                add: function () {
                    //(1)只要点击了+号， 就要启用 - 号
                    this.minusDisabled = false;
                    //(2)数字+1
                    this.num++;
                    //(3)限制最大数字为10
                    if (this.num == 10) {
                        this.addDisabled = true;
                    };
                },
                minus: function () {
                    //(1)只要点击了-号， 就要启用 + 号
                    this.addDisabled = false;
                    //(2)数字-1
                    this.num--;
                    //(3)限制最小数字为0
                    if (this.num == 0) {
                        this.minusDisabled = true;
                    };
                },

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

</html>

1.6.2-计数器优化版

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        .input-num {
            width: 180px;
            height: 40px;
            border: 1px solid gray;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
        }

        .input-num button {
            width: 50px;
            height: 100%;
            font-size: 25px;
            color: gray;
            cursor: pointer;
        }

        .input-num span {
            height: 100%;
            border: 1px solid gray;
            flex: 1;
            text-align: center;
            line-height: 40px;
        }

        .input-num button.disabled {
            cursor: not-allowed;
            color: #ccc;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- 计数器 -->
        <div class="input-num">
            <button @click="num--" :disabled="num==0" :class="{disabled:num==0}">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="num++" :disabled="num==10" :class="{disabled : num==10}">
                +
            </button>
        </div>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                num: 0,
            }
        })
    </script>
</body>

</html>

案例验收

问题1：原生dom语法实现动态案例的思路？
传统DOM思维
(1)获取元素:按钮和span
(2)注册事件
(3)修改元素的文本innerText
问题2：vue语法实现动态案例思路？
Vue思维:数据驱动
(1)思维案例需要什么数据 : 数量count
(2)注册事件
(3)使用插值或指令修改数据

1.7-v-for指令(列表渲染)

v-for指令官方文档传送门：https://cn.vuejs.org/v2/guide/list.html
- 遍历数组语法：v-for="(value,index) in arr"
  - value:数组元素
  - index:数组下标
- 遍历对象语法：v-for="(value,key,index) in obj"
  - 该语法使用较少，了解即可
  - value:对象属性值
  - key:对象属性名
  - index:下标

<!-- 
    1.学习目标：  v-for 指令
    2.学习路线
        (1)作用：遍历数组，并重复生成对应长度的相同标签
        (2)语法： v-for="item in 数组名"
            遍历下标：   v-for="(item, index) in items"
        (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
 -->

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <li v-for="(item,index) in list" @click="doClick(item)">
           这是第{{index}}个li元素： {{ item }}
        </li>
    </div>
    <!-- 
        1.学习目标：  v-for 指令
        2.学习路线
            (1)作用：遍历数组，并重复生成对应长度的相同标签
            (2)语法： v-for="item in 数组名"
                遍历下标：   v-for="(item, index) in items"
                
            (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list:[
                    '小明',
                    '小强',
                    '小花',
                    '小坤',
                    '小老弟'
                ]
            },
            methods: {
              doClick:function(item){
                alert(item);
              }  
            },
        })
    </script>
</body>
</html>

知识点验收

问题1：请说出v-for指令的作用
- 列表渲染:根据数组元素,重复与渲染元素
问题2：请说出v-for指令使用时的注意点？
- 写在谁身上,就对谁生效

1.8-v-model指令(双向数据绑定)

1.8.1-双向数据绑定基本使用

v-model指令官方文档传送们：https://cn.vuejs.org/v2/api/#v-model
v-model只能用于表单元素!
v-model只能用于表单元素!
v-model只能用于表单元素!
双向数据绑定
- 表单元素的值进行了修改，这个变量的值也会跟着修改
- 这个变量的值进行了修改，表单元素的值也会跟着修改

<!-- 
    1.学习目标 ： v-model 指令
    2.学习路线 
        (1)作用 ： 双向数据绑定
            a. 表单元素的值进行了修改，这个变量的值也会跟着修改
            b. 这个变量的值进行了修改，表单元素的值也会跟着修改
        (2)语法：  v-model="变量名"
        (3)注意点： 
            a.   v-model只能用于表单元素
            b.   变量名要定义在data对象中
 -->

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text"  v-model="name">
        <p>我的名字是: <span>{{ name }}</span></p>
        <button @click="doClick">点我修改model</button>
    </div>
    <!-- 
        1.学习目标 ： v-model 指令
        2.学习路线 
            (1)作用 ： 双向数据绑定
                a. 表单元素的值进行了修改，这个变量的值也会跟着修改
                b. 这个变量的值进行了修改，表单元素的值也会跟着修改
            (2)语法：  v-model="变量名"
            (3)注意点： 
                a.   v-model只能用于表单元素
                b.   变量名要定义在data对象中
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name:''
            },
            methods: {
                doClick:function(){
                    this.name = '坤坤';
                }
            },
        })
    </script>
</body>
</html>

在这里插入图片描述

1.8.2-双向数据绑定的意义

双向数据绑定的意义
- 可以让我们快速的得到表单元素的值
- 可以让我们快速的设置表单元素的值
  - 双向绑定技术的底层原理是：js属性拦截
  - 对双向数据绑定原理感兴趣的可以课后了解一下哈：JS双向数据绑定原理

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        登陆框： <input type="text" v-model="username" placeholder="请输入用户名">
        <br>
        密码框： <input type="password" v-model="password" placeholder="请输入密码">
        <br>
        <button @click="loginClick">登录</button>
    </div>
    <!-- 
        1.学习目标：了解双向数据绑定的意义
            可以让我们快速 (得到 | 设置) 表单元素的值
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                username：'',
                password: ''
            },
            methods: {
                loginClick:function(){
                    //修改了表单元素 ->  修改了password
                    if(this.password != '123456'){
                        alert('密码错误，请重新输入');
                        //修改password  ->   修改了表单元素的值
                        this.password = '';
                    }
                }
            },
        })
    </script>
</body>
</html>

双向绑定v-model
- 修改表单的值,data的数据会自动变化
- 修改data的数据,表单值也会变化

v-model绑定的数据一定要在data中声明
v-model只能用于表单元素

1.9-综合案例：记事本

本案例涉及到的前置知识点
- arr.splice() ：删除元素
  - 第一个参数，从第几个下标开始删除
  - 第二个参数：要删除几个元素
  - 例如： arr.splice(2,1) 删除下标为2的元素

<!--思路分析(交互)
    1.输入框输入enter键，将数据添加到列表
    2.双击列表li元素删除

    Vue编程思维
        * (1)写页面结构 HTML+CSS
        * (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
            * 表单的值 ： v-model双向数据绑定 msg
            * enter键事件： v-on 绑定enter键事件
            * 数据添加到列表: v-for 渲染列表 list
            * 双击列表删除: v-on 绑定双击事件，移除list元素
        * (3)在页面视图中使用插值语法或者指令显示data中的数据
 -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        h2 {
            text-align: center;

        }

        body {
            text-align: center;
        }

        input {
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 22px;
            padding-left: 10px;
            outline: none;
            border: 1px solid #000;
        }

        .items {
            list-style: none;
            padding: 0;
            width: 300px;
            margin: 0 auto;
            text-align: left;
        }

        table,th,td,tr {
            width: 600px;
            margin: 50px auto;
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
            transition: all 0.5s linear;
        }

        tr.over{
            background-color: cyan;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <h2>小黑记事本</h2>
        <input type="text" placeholder="请输入内容(双击删除)" v-model.trim="msg" @keydown.enter="add" />
        <table>
            <thead>
                <th>索引</th>
                <th>内容</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{ index+1 }}</td>
                    <td>{{item}}</td>
                    <td><button @click="delClick(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--思路分析(交互)
        1.输入框输入enter键，将数据添加到列表
        2.双击列表li元素删除

        Vue编程思维
            * (1)写页面结构 HTML+CSS
            * (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
                * 表单的值 ： v-model双向数据绑定 msg
                * enter键事件： v-on 绑定enter键事件
                * 数据添加到列表: v-for 渲染列表 list
                * 双击列表删除: v-on 绑定双击事件，移除list元素
            * (3)在页面视图中使用插值语法或者指令显示data中的数据
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '',
                list: []
            },
            methods: {
                add: function () {
                    //1.添加记录（修改输入框文本，msg也会变化）
                    this.list.push(this.msg);
                    //2.清空输入框内容方便下一次输入（修改msg，输入框文本也会变化）
                    this.msg = '';
                },
                delClick: function (index) {
                    //1.事件传参 获取要删除的内容下标
                    alert(`您要删除第${index+1}条记录`);
                    //2.使用数组splice方法删除指定下标元素
                    //第一个参数：从第几个下标开始删除  第二个参数：要删除的个数
                    this.list.splice(index, 1);
                }
            },
        })
    </script>
</body>
    
</html>

03vue代码提示插件安装

1.vue代码错误提示插件:Vetur
2.vue代码块提示插件：·Vue 2 Snippets

A-sleep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue 入门基础知识

01-Vue入门学习Vue最好的方式：查看官网文档https://cn.vuejs.org/1.1-Vue介绍Vue介绍描述1.Vue是一个JavaScript框架框架：别人写好的js文件2.作用：构建用户页面将数据渲染到页面3.特点：渐进式组件式开发1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue是一个JavaScript框架Vue是一个用于构建用户页面的框架Vue是一个用于构建用
复制链接

扫一扫

专栏目录