VUE学习笔记--Vue的基本使用-CFANZ编程社区

文章目录

基本使用步骤

1.导入vue.js的script脚本文件(可在官网下载)
vue官网
2.在页面中声明一个将要被vue所控制的DOM区域
3.创建vm实例对象(vue的实例对象)

<!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>
    <!-- 要Vue控制的div -->
    <div id="app"> {{ username }} </div>

    <!-- 导入vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 创建vue的实例对象
        const vm = new Vue({
            // el属性是固定写法，表示当前vm实例要控制页面上的那个区域，接收值是一个选择器
            el: '#app',
            // data对象就是要渲染到页面上的数据
            data: {
                username: '张三'
            }
        })
    </script>
</body>
</html>

请添加图片描述

指令的概念

请添加图片描述

内容渲染指令

内容渲染指令是用来辅助开发者渲染DOM元素中的文本内容
常用的内容渲染指令：
1.v-text
2.{{ }}
3.v-html

v-text
用法示例：

<!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">
        <!-- 要渲染的DOM -->
        <p v-text="username"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            // 要渲染的数据
            data: {
                username: '张三'
            }
        })
    </script>
</body>
</html>

v-text的缺点：会覆盖元素内部原有的内容

{{}}
vue提供的{{}}语法是用来解决v-text会覆盖默认文本内容的问题，这种{{}}语法的专业名称是插值表达式
{{}}在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容

<!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">
        <p>姓名：{{ username }}</p>
        <p>性别：{{ gender }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: "lisi",
                gender: "男"
            }
        })
    </script>
</body>
</html>

v-html
v-text和{{}}只能渲染纯文本内容，如果要把包含html标签的字符串渲染为页面的html元素，需要使用v-html

<!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 v-html="content"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                content: "<h1>你好</h1>"
            }
        })
    </script>
</body>
</html>

属性绑定指令

插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中
在vue中可以使用 v-bind：指令为元素的属性动态绑定值
简写为英文的：

<!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">
        <input type="text" v-bind:placeholder="tips">
        <input type="text" :placeholder="tips">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                tips: "请输入..."
            }
        })
    </script>
</body>
</html>

使用JavaScript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值外，还支持JavaScript表达式运算

<!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">
        <p>{{ tips + '1' }}</p>
        <p>{{ ok ? '1' : '2' }}</p>
        <p>{{ tips.split('').reverse().join('') }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                tips: "请输入..."
            }
        })
    </script>
</body>
</html>

在使用属性绑定期间，绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

<!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">
        <p :title=" 'tips' + 123 ">nihao</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                tips: "请输入..."
            }
        })
    </script>
</body>
</html>