Vue笔记精华版

最新推荐文章于 2024-10-12 10:41:56 发布

Be equal to anything

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量73

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_72185470/article/details/126277797

版权

前言

一.vue的特点

1采用组件化模式，提高代码复用率且让代码更好维护

2.声明式偏码，无需直接dom操作效率高

3.虚拟dom+优秀的diff算法，尽量复用dom节点

Vue2.0笔记

第一章vue核心

引进vue需要框架

----------------------第一章vue核心-------------------------

一.初识vue

1.想让vue工作，就必须创建一个实例对象并且还要传入一个配置对象

1.1el是指用于指定当前容器为哪个标签服务 （这里指的是head标签）

1.2data用于存储数据，数据供el所指定容器使用

<body>
    <div class="head">
        <h1>我是{{name}}今年{{age}},初识VUE,心情无比激动</h1>
     
    </div>
</body>

<!-- 开发环境 -->

<!-- 将vue2的框架引进来 -->

<script src="../vue/vue.js/vue.min.js"></script>

<script>

    // 使用vue必须创建实例对象

    new Vue({
        el: '.head',//里面的值通常为css选择器
        data: {
            name: '周健',
           age: '21'
        }
    })
</script>

2.root容器的代码依然要符合html规范

2.1{{}}该语法为vue新语法用于更换实例对象里面data的值,里面的值必须是表达式

2.2整个div标签叫vue模板

<body>
    <div class="head">
        <h1>我是{{name}}今年{{age}},初识VUE,心情无比激动</h1>
    </div>
</body>

3.容器里的代码称为vue模板

4.vue实例和容器是一一对应的

5.真实开发中只有一个实例，配合组件开发（组件后面再讲）

6.data里面的数据发生改变，页面数据也会更新

二.模板语法

1.差值语法 {{}}

功能：用于解析标签

再标签体里面写

<h2 class="tittle">{{name}}模板语法</h2>

<body>
    <!-- 将vue2的框架引进来 -->
    <script src="../vue/vue.js/vue.min.js"></script>
    <script>
        //插值语法
        new Vue({
            el: '.tittle',
            data: {
                name: 'VUE'
            }
        })
    </script>
</body>

2.指令语法 v-bind

功能：用于解析标签(标签属性，标签体内容，绑定事件)

<div class="tittle">
    <!-- <a v-bind:href="url">Vue</a> -->
    <!-- v-bind可以简写成： -->
    <a :href="url">vue</a>
</div>

<body>
    <!-- 将vue2的框架引进来 -->
    <script src="../vue/vue.js/vue.min.js"></script>
    <script>
        // 指令语法
        // 常见我们更换链接，用插值语法无法更换所以就用到了v-bind指令
        new Vue({
            el: '.tittle',
            data: {
                url: 'https://baidu.com/'
            }
        })
    </script>