Vue2基础速成

zhangguo2002

已于 2025-05-01 15:14:42 修改

阅读量229

点赞数 3

文章标签： vue 前端

于 2025-05-01 15:09:37 首次发布

本文链接：https://blog.csdn.net/zhangguo2002/article/details/147646799

版权

一、准备工作

首先下载vue2的JavaScript库，并且命名为vue.min.js

下载链接：https://cdn.jsdelivr.net/npm/vue@2（若链接失效可去vue官网寻找）
CTRL+S即可下载保存

文件目录结构

二、使用操作原生DOM与使用VUE操作DOM的便捷性比较

操作原生DOM

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
        let value = '这是内容'
        document.getElementById('app').textContent = value
        value = '这是新的内容'
        document.getElementById('app').textContent = value
    </script>
</body>

</html>

使用VUE操作DOM

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.2插值表达式 -->
        <p>{{title}}</p>
        <p>{{content}}</p>
        <p>{{1+2+3}}</p>
        <p>{{1>2?'对':'错'}}</p>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        //1、响应式数据与插值表达式
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    title: '这是标题文本',
                    content: '这是内容文本'
                }
            }
        })
    </script>

</body>

</html>

三、其它使用VUE操作DOM的技巧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.2插值表达式 -->
        <p>{{title}}</p>
        <p>{{content}}</p>
        <!-- <p>{{1+2+3}}</p>
        <p>{{1>2?'对':'错'}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p> -->
        <!--4、指令 -->
        <!-- 内容指令 -->
        <!-- <p v-text="title">123</p>
        <p v-html="content">123</p> -->
        <!-- <p v-text=htmlContent>123</p>
        <p v-html=htmlContent>123</p> -->
        <!-- 渲染指令 -->
        <!-- <p v-for="(item,key,index) in arr">这是内容：{{item}}-{{key}}</p>
        <p v-for="(item,key,index) in obj">这是内容：{{item}}-{{key}}-{{index}}</p> 
        <p v-if="false">标签内容</p>
        <p v-show="bool">标签内容</p> -->

        <!-- 属性指令 -->
        <!-- <p v-bind:title="title">标签内容</p>
        <p :title="title">标签内容</p> -->

        <!-- 事件指令 -->
        //下面这行是属性指令
        <!-- <button v-on:click="output">按钮</button> -->
        <!-- <button @click="output">按钮</button> -->

        <!-- 表单指令：v-model可以实现双向数据绑定 -->
        <input type="text" v-model="inputValue">
        <p v-text="inputValue"></p>

        <!-- 5、修饰符 -->
        <input type="text" v-model.trim="inputValue">
    </div>

    </div>
    <script src="./vue.min.js"></script>
    <script>
        //1、响应式数据与插值表达式
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    title: '这是标题文本',
                    content: '这是内容文本',
                    htmlContent: '这是一个<span>span</span>标签',
                    arr: ['a', 'b', 'c', 'd'],
                    obj: { a: 10, b: 20, c: 30 },
                    bool: true,
                    inputValue: '默认内容'
                }
            },
            //1.3methods属性
            methods: {
                output() {
                    console.log('methods执行了')
                    return '标题为：' + this.title + ',' + '内容为' + this.content
                }
            },
            //2、计算属性：具有缓存性
            computed: {
                outputContent() {
                    console.log('computed执行了')
                    return '标题为：' + this.title + ',' + '内容为' + this.content
                }
            },
            //3、侦听器
            watch: {
                title(newVal, oldVal) {
                    console.log(newVal, oldVal)
                }
            }
        })

    </script>

</body>

</html>