web学习笔记（五十四）Vue

shan33__

已于 2024-05-23 11:34:49 修改

阅读量647

点赞数 25

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

于 2024-05-15 16:25:11 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/138897685

版权

笔记专栏收录该内容

83 篇文章 6 订阅

订阅专栏

2.1 Mustache（双大括号插值法）

2.2 v-text

2.3 v-html

3. 列表渲染（循环）

1.初始Vue

1.1 什么是Vue

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 Vue的特点

Vue 上手简单易用。
Vue 具有灵活强大的生态系统。

Vue 比较高效，采用虚拟dom（使用js对象描述的dom节点）。

  // 虚拟dom,因为真实的dom里面包含的方法和属性太多了，多次加载会耗费大量内存，
  //而使用对象来模拟dom节点就可只加载我们需要的方法和属性，会节约大量内存
        let div = {
            tagname: 'div',
            attr: {
                id: 'box',
                class: 'a'
            },
            innerHTML: '好好学习，天天向上'
        }

Vue 采用diff算法(差异算法或对比算法)：通过比较新旧组件树或虚拟DOM树，框架能够找出最小更新集合并减少不必要的DOM操作，从而提高应用的性能。

1.3 引入Vue

引入vue可以选择引入在线文件，也可以将文件中的内容全部复制到本地的.js文件中，然后引用该.js文件。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1.4 使用Vue

使用vue需要创建Vue实例参数为options（选项）表示一个对象。

 let vm = new Vue({
            // element 元素节点 表示当前vue实例所作用的元素节点
            el: "#app",
            // 存放当前数据的集合
            data: {
                msg: 'hello world vue.js',
                title: '初始vue'
            }
        });

1.5 vue2和vue3的区别

vue2用的是选项式API: 通过配置的方式写业务逻辑，声明响应式数据。
vue3用的是组合式API：通过不同的API进行任意组合搭配，实现逻辑的连贯性。比如：数据和方法可以放在一起，查找和阅读代码都非常方便。

2. 数据绑定的方法

2.1 Mustache（双大括号插值法）

双大括号会将数据解释为普通文本，而非 HTML 代码。而且这个方法还有插值闪烁的问题，可以在标签内写入v-cloak，再设置v-cloak的样式为display: none;可以解决这个问题。
Mustache（双大括号插值法）也可以绑定一个js表达式。在使用js表达式时，每个绑定的值都只能是单个表达式，语句、及流程控制、函数等是不会生效的，

 <style>
        [v-cloak] {
            display: none;
        }
    </style>
<body>
    <div id="app">
        <!-- 双大括号中只能写js表达式 -->
        <h1 v-cloak>{{msg.split('')}}</h1>
        <h2 v-cloak>{{sex?'男':'女'}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '好好学习 天天向上！！！',
                sex: true
            }
        })
        console.log(vm);
    </script>
</body>

2.2 v-text

v-text指令用来渲染内容类似于原生js中的innerText。

<body>
    <div id="app">
        <!-- v-text指令用来渲染内容 类似于原生js中的innerText -->
        <h2 v-text="title"></h2>
    </div>
    <!-- 插值闪烁： -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'Vue基础指令',
                title:'请认真学习',
                html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官网</a>"
            }
        })
    </script>
</body>

2.3 v-html

v-html指令用来渲染内容类似于原生js中的innerHtml。

<body>
    <div id="app">
        <!--v-html指令用来渲染内容 类似于原生js中的innerHtml  -->
        <h3 v-html="html"></h3>
    </div>
    <!-- 插值闪烁： -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'Vue基础指令',
                title:'请认真学习',
                html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官网</a>"
            }
        })
    </script>
</body>

3. 列表渲染（循环）

在vue中使用v-for指令可以进行数组格式数据渲染，v-for列表循环时必须要绑定一个唯一标识key。

格式： <li v-for="(item,index) in list">{{item}}---{{index}}</li>

v-for	用于列表循环
item	表示遍历得到的每一项
index	表示遍历得到的每一项所对应的索引
list	表示要循环的数组名称

<body>
    <div id="app">
        <ol>
            <!-- v-for 用于列表循环
                 item  表示遍历得到的每一项
                 index 表示遍历得到的每一项所对应的索引
                 list  表示要循环的数组名称-->
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}---{{index}}</li>
        </ol>
        <hr>
        </hr>
        <ul>
            <li v-for="(item,index) in userList" v-bind:key="index">{{item.name}}---{{item.age}}---{{item.sex}}</li>
        </ul>
        <!-- 遍历数字 -->
      <ol>
        <li v-for="(item,index) in num" v-bind:key="index">{{item}}---{{index}}</li>
      </ol>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['张三', '李四', '王五', '赵六', '关四'],
                userList: [{
                        name: "张11",
                        age: 18,
                        sex: '男'
                    },

                    {
                        name: "张22",
                        age: 17,
                        sex: '女'
                    },
                    {
                        name: "张33",
                        age: 16,
                        sex: '男'
                    }


                ],
                num: 10
            }
        })
    </script>
</body>

为什么在写v-for时需要绑定key？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，采用diff算法(差异算法或对比算法)即通过比较新旧组件树或虚拟DOM树，框架能够找出最小更新集合并减少不必要的DOM操作，从而提高应用的性能。而key的作用就是明确告诉系统此循环中第几个节点被改变，从而减少对比次数，达到高效的更新虚拟 DOM的效果。