Vue2_知识点——1

最新推荐文章于 2023-06-12 11:39:31 发布

小鲫鱼学前端

最新推荐文章于 2023-06-12 11:39:31 发布

阅读量408

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/love33441314520/article/details/129779500

版权

Vue.js是一个用于构建用户界面的渐进式框架，提供包括核心库、路由、状态管理和组件库在内的全套解决方案。文章介绍了Vue的基本使用，如创建实例、数据绑定、指令应用（如v-text、v-html、v-bind、v-on）、事件绑定、条件渲染、列表渲染以及过滤器的使用，展示了Vue如何提高前端开发效率。

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

Vue.js 简介

Vue 是什么

vue 是一套用于构建用户界面的渐进式框架。1.使用 vue 构建用户界面，解决了 jQuery + 模板引擎的诸多痛点，极大提高了前端开发的效率和体验； 2. vue 中提供的指令，可以方便快捷的渲染页面结构。数据驱动视图 (只要页面原来的数据源变化，则页面自动重新渲染)

核心关键词：框架

vue 的定义是前端框架，它提供了构建用户界面的一整套解决方案 (vue 全家桶)

1. vue (核心库)

2. vue-router (路由方案)

3. vuex (状态管理方案)

4. vue 组件库(快速搭建页面 UI 效果)

辅助 vue 项目开发的工具：

1. vue-cli (npm 全局包: 一键生成工程化的 vue 项目 -基于 webpack)

2. vite (npm 全局包: 一键生成工程化的vue 项目)

3. vue-devtools (浏览器插件: 辅助调试的工具)

4. vetur (vscode 插件: 提供语法高亮和智能提示)

双向数据绑定

MVVM

Vue 基本使用

1. 基本使用步骤

1. 导入 vue.js 的script 脚本文件

2. 页面声明一个将要被 vue 所控制的 DOM 区域

3. 创建 vm 实例对象(vue 实例对象)

<body>
    <!-- 希望 Vue 能够控制下面的这个div ，帮我们把数据填充到 div 内部 -->
    <!-- 双花括号将 data 数据渲染到页面-->
    <div id="app">{{username}}</div>

<!-- 导入vue的库文件 ，在window 全局就有了 Vue 这个构造函数-->
    <script src="./lib/vue.js"></script>
    <!-- 2.创建vue 的实例对象 -->
    <script>
        //创建 Vue 的实例对象
        const vm = new Vue({
            //el 属性是固定的写法，表示当前 vm 实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            //data 对象就是要渲染到页面上的数据
            data: {
                username: 'zhangsan'
            } 
        })

    </script>
</body>

2. 指令的概念

内容渲染；属性绑定；事件绑定；双向绑定；条件渲染；列表渲染

1. 内容渲染

1.1 v-text :会覆盖元素内默认的值

1.2 {{ }}

1.3 v-html

<body>
    <!-- 希望 Vue 能够控制下面的这个div ，帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p v-text="username"></p>
        <!-- v-text会覆盖元素内部原有的指令 -->
        <p v-text="gender">性别</p>

        <hr>
   <!--插值表达式，不会覆盖元素中默认的文本内容 -->
        <p>姓名: {{username}}</p>
        <p>性别: {{gender}}</p>

        <hr>

        <div v-text="info"></div>
        <div>{{info}}</div>
        <!-- 将带有html元素的标签渲染成真正的DOM -->
        <div v-html="info"></div>
    </div>

<!-- 导入vue的库文件 ，在window 全局就有了 Vue 这个构造函数-->
    <script src="./lib/vue.js"></script>
    <!-- 2.创建vue 的实例对象 -->
    <script>
        //创建 Vue 的实例对象
        const vm = new Vue({
            //el 属性是固定的写法，表示当前 vm 实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            //data 对象就是要渲染到页面上的数据
            data: {
                username: 'zhangsan',
                gender: '女',
                info: '<h4 style="color: red; font-weight: bold;">欢迎</h4>'
            }
        })

    </script>
</body>

2. 属性绑定

属性绑定：v-bind，简写形式为 ‘ : ’ ，动态绑定值

<body>
    <!-- 希望 Vue 能够控制下面的这个div ，帮我们把数据填充到 div 内部 -->
    <div id="app">
        <input type="text" :placeholder="tips">
        <hr>
        <!-- vue 规定 v-bind: 指令可简写为‘:’ -->
        <img :src="photo" alt="" style="width: 150px;">
    </div>

<!-- 导入vue的库文件 ，在window 全局就有了 Vue 这个构造函数-->
    <script src="./lib/vue.js"></script>
    <!-- 2.创建vue 的实例对象 -->
    <script>
        //创建 Vue 的实例对象
        const vm = new Vue({
            //el 属性是固定的写法，表示当前 vm 实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            //data 对象就是要渲染到页面上的数据
            data: {
                tips: '请输入用户名',
                photo: 'https://cn.vuejs.org/logo.svg'
            }
        })

    </script>
</body>

3. 事件绑定

事件绑定：v-on，简写形式：‘ @ ’，为DOM元素绑定事件监听

v-on:click监听点击事件，v-on:input监听输入事件，v-on:keyup监听按键事件

绑定点击事件函数，在 ' methods '中声明

add(){
                    // console.log(vm === this)
                    // console.log(vm)
                    // vm.count +=1
                    this.count +=1
                },
                sub(){
                    // if(vm.count==0){

                    // }else{
                    // console.log(vm)
                    // vm.count -=1 
                    // }
                    this.count -=1
                }

事件对象 event

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件对象 event

<body>
    <!-- 希望 Vue 能够控制下面的这个div ，帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p>count 的值是：{{ count }}</p>
        <!-- 如果 count 是偶数，则按钮颜色变为红色，否则，取消背景颜色 -->
        <!-- vue 提供了内置变量，名字叫做$event ,他就是原生 DOM 的事件对象 e -->
        <!-- <button @click="add(1,$event)">+N</button> -->
        <button @click="add">+1</button>
    </div>

<!-- 导入vue的库文件 ，在window 全局就有了 Vue 这个构造函数-->
    <script src="./lib/vue.js"></script>
    <!-- 2.创建vue 的实例对象 -->
    <script>
        //创建 Vue 的实例对象
        const vm = new Vue({
            //el 属性是固定的写法，表示当前 vm 实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            //data 对象就是要渲染到页面上的数据
            data: {
                count:0
            },
            methods:{
                add(e) {
                    const nowBgcolor = e.target.style.backgroundColor
                    e.target.style.backgroundColor = nowBgcolor === 'red' ? '' : 'red'
                    this.count += 1
                }

4. 双向绑定

v-modle 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

注意：v-modle 指令只能配合表单元素一起使用

<p>用户的名字是：{{ username }}</p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>

5. 条件渲染

v-if 和 v-show指令来控制元素在页面的显示与隐藏

<div id="app">
        <button @click="flag = !flag">修改flag</button>
        <!-- v-if会动态创建或移除DOM元素，v-show会动态为元素添加或移除style="display:none"样式 -->
        <p v-if="flag">这是被 v-if 控制的元素</p>
        <p v-show="flag">这是被 v-show 控制的元素</p>
    </div>

data: {
                //如果 flag 为 true ，则显示被控的元素，如果为false 则隐藏被控制的元素
                flag:true
            }

6. 列表渲染

v-for，必须绑定一个key值，尽量把id作为key的值，key值的类型得是字符串或者数字类型，key值不能重复，否则报错

<table class="table table-bordered table-hover table-striped" >
            <div>
                <input type="text" v-model="name">
                <button @click="addNewUser">添加</button>
            </div>
            <thead>
                <th>索引</th>
                <th>Id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <!--官方建议:只要用到了 v-for 指令，那么一定要绑定一个key 属性-->
                <!--而且，尽量把id作为key的值-->
                <!-- 官方对key的值类型，是有要求的：字符串或数字类型-->
                <!-- key的值是千万不能重复的，否者会终端报错：Duplicate keys detected-->
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{ index }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
        </table>

过滤器

过滤器：filters，分为私有过滤器和全局过滤器。写法：<p>被修饰的元素的值是：{{ 被修饰的元素 | 过滤器函数 }}</p>

私有过滤器，只能在当前 vm 实例所控制的 el 区域内使用。全局过滤器可以在多个 vue 实例之间使用

私有过滤器

filters:{
                //注意：过滤器函数形参中的val，永远都是“管道符”前边的那个值
                capi(val){
                    // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引值对应的字符，获取出来
                    // val.charAt(0)
                    const first = val.charAt(0).toUpperCase()
                    //字符串的 slice 方法，可以截取字符串，从指定索引往后截取
                    const other = val.slice(1)
                    console.log(first)
                    //过滤器中一定要有一个返回值
                    return first + other
                }
            }

全局过滤器

Vue.filter('capi', function(str){
            const first = str.charAt(0).toUpperCase()
            //字符串的 slice 方法，可以截取字符串，从指定索引往后截取
            const other = str.slice(1)
            //过滤器中一定要有一个返回值
            return first + other+'~~~'
        })

过滤器传参

<div id="app2">
        <p>message 的值是：{{ message | capi | maxLength(5)}}</p>
    </div>
<!-- maxLength传递的参数通过len来接收 -->
Vue.filter('maxLength', function(str,len = 10) {
            if(str.length <=10 ) return str
            return str.slice(0, len)+'...'
        })