vue2.0学习笔记

@贾鲍鱼[太阳]

已于 2023-03-14 14:56:33 修改

阅读量196

点赞数 1

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

于 2023-03-13 16:55:01 首次发布

本文链接：https://blog.csdn.net/A1107769594/article/details/129488569

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了Vue2.0的基础概念，包括数据驱动视图和双向数据绑定的特性，以及MVVM模式。详细讲解了Vue的基本使用步骤，如创建VM实例和数据绑定。同时，文章阐述了Vue的指令系统，如内容渲染、属性绑定、事件绑定、双向绑定、条件渲染和列表渲染指令，帮助读者理解Vue如何操作和管理DOM。

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

vue2.0学习笔记

part 1

1、什么是vue

构建用户界面--框架
构建用户界面：用vue往html页面中填充数据
框架：是一套现成的解决方案，只能遵守框架规范，编写业务

2、vue的两个特性

1、数据驱动视图

数据的变化会驱动视图自动更新
好处：程序员只管把数据维护好，页面结构会被vue自动渲染出来

2、双向数据绑定

js数据的变化，会自动渲染到页面上
页面上表单采集的数据发生变化时，会被vue自动获取到，并更新到js数据中

3、MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理
MVVM指的是Model 、 View 和 ViewModel
Model：表示当前页面渲染时所依赖的数据源
View：表示当前页面所渲染的DOM结构
VIewMosel：表示vue实例，是MVVM的核心。是它把当前页面的数据原和页面结构连接在一起

4、vue的基本使用

- 导入vue.js的script脚本文件
- 在页面中声明一个将要被vue所控制的DOM区域
- 创建VM实例对象（vue实例对象）

<body>
    <!-- 希望vue能够控制下面的这个div，帮我们把数据填充到div内部 -->
    <div class="app">{{username}}</div>
    <!-- 1、导入vue的库文件，在window全局就有了vue这个构造函数 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 2、创建vue实例对象 -->
    <script>
        // 创建vue实例对象
        const vm = new Vue({
            // el属性是固定写法，表示当前实例要控制页面上的哪个区域，接受值是一个选择器
            el:"#app",
            // data对象就是要渲染到页面上的数据
            data:{
                username:"zhangsanfeng"
            }
        })
    </script>
</body>

5、vue的指令与过滤器

指令：是指vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
vue中的指令按照不同的用途可以分为六大类：

1. 内容渲染指令：

用来辅助开发者渲染DOM元素的文本内容，常用指令有

// v-text：  会覆盖原有内容      
<p v-text="username">姓名</p>  //姓名会被username覆盖
// {{}}：叫插值表达式，实际开发中用的最多，只是内容占位符，不会覆盖原有内容
<div class="app">姓名：{{username}}</div>   //姓名：username内容
// v-html：包含html标签字符串渲染为页面的html元素需要用到
info:"<h5 style='color:red;'>我是h5标签</h5>"  //vue的使用中data增加一个info属性
<div class="app">
        <p v-html="info"></p>
</div>

2. 属性绑定指令：

为元素属性动态绑定值 v-bind 可简写为 :

<div class="app">
        <!-- data中新增属性tips:"请输入用户名"-->
        <input type="text" v-bind:placeholder="tips">
        <!-- v-bind: 可简写为： -->
        <!-- data中新增属性photo:"https://www.zcool.com.cn/work/ZNjQ0MDA4Mjg=.html"-->
        <img :src="photo" alt="">
    </div>

3. 事件绑定指令：

为元素绑定事件 v-on 可简写为 @

<div class="app">
        <p>count的值为:{{count}}</p>
        <!-- <button v-on:click="add(1)"> +1</button> -->
        <button @click="add(1)"> +1 </button>
    </div>
    <!-- 1、导入vue的库文件，在window全局就有了vue这个构造函数 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 2、创建vue实例对象 -->
    <script>
        // 创建vue实例对象
        const vm = new Vue({
            // el属性是固定写法，表示当前实例要控制页面上的哪个区域，接受值是一个选择器
            el:"#app",
            // data对象就是要渲染到页面上的数据
            data:{
                count:0
            },
            //methods 用来存放方法
            methods:{
                add(n){
                    //this === vm 
                    this.count += 1
                }
            }
        })
    </script>

4. 双向绑定指令：

快速获取表单数据 v-model 适用于input输入框，textarea，select等

<div class="app">
        <input type="text" v-modle="username">
        <select v-modle="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:"张无忌",
                city:''
            },
        })
    </script>

5. 条件渲染指令：

控制元素的显示与隐藏 v-if \ v-show
v-if：动态为元素添加或移除display：none样式（适合需要频繁显示与隐藏）
v-show：动态创建或移除元素（适合创建或移除后不需要再重复操作）

<div class="app">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                //如果flag为true，则显示被控制的元素，如果为false则隐藏被控制的元素
                flag:true
            },
        })
    </script>

6. 列表渲染指令：

基于一个数组来循环渲染一个列表结构 v-for 需要使用item in items形式的特殊语法
v-for ：需要使用item in items形式的特殊语法，其中items是待循环的数组，item是被循环的每一项
官方规定：使用v-for，一定要绑定一个key的值，最好为id，key的值只能为数字或字符，具有唯一性

<div class="app">
        <table>
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <!-- <tr v-for="item in list">  如果需要索引号，item可以换为(item , index)-->
                <tr v-for="(item , index) in list" :key="item.id">
                    <td >0</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1 , name:"张三"},
                    {id:2 , name:"李四"},
                    {id:3 , name:"王五"},
                ]
            },
        })
    </script>