vue基础知识

news2025/1/18 16:59:54

1、特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。
在这里插入图片描述
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率
命令式编码

3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点。

2、hello vue

vue的引入
就是写在引入css的地方就行了
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    在这里引入
    <script src="../vue.js"></script>
</head>
<body>
</body>
</html>

注意：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象new Vue;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为[Vue模板];
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个vue实例，并且会配合着组件一起使用;
6.{{xxx}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;

注意区分: js表达式和 s代码(语句)
表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ?a’: b’

js代码(语句)
(1). if( ){ }
(2). for( ){ }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    //-------------------------------------------------------
    <div id="root">
        <h1>hello，{{name}}</h1>
        <h1>今年{{age}}岁了！</h1>
    </div>
    <!-- 这个就没有效果，以为没有选择器选中他 -->
    <h1>{{name}}</h1>
    //-----------------------------------------------------------
    
    <script type="text/javascript">
        // Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。
        
        // 创建vue实例--------------------------------------------------
        const x = new Vue({
            // el:document.querySelector("#root"), //这样也是可以的
            el: '#root',  //el用于指定当前Vue实例为那个容器服务，值通常是css选择器字符串
            data: {
                name: 'world',
                age: 23,
            }
        });
        //--------------------------------------------------------
    </script>

</body>

</html>

在这里插入图片描述

3、模板语法

注意：
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法: {{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法:
功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件…)
举例: v-bind:href="xxx”或简写为 :href=“xxx”，
xxx同样要写is表达式，且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。

<!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h1>hello，{{name}}</h1>
        <h1>今年{{age}}岁了！</h1>

        <h1>指令语法</h1>
        <a v-bind:href="url" target="_blank">点我去百度学习</a>
        <a :href="url">v-bind:可以简写成:</a>
        <h2>我的学校是{{school.name}}</h2>
    </div>
    <script type="text/javascript">
        // 创建vue实例
        const x = new Vue({
            // el:document.querySelector("#root"), //这样也是可以的
            el: '#root',  //el用于指定当前Vue实例为那个容器服务，值通常是css选择器字符串
            data: {
                name: 'world',
                age: 23,
                url: 'https://www.baidu.com',
             // 如果有多个name，不想换名字的情况下，可以用一个对象包括
                school:{
                    name:'家里蹲',
                }
            }
        });
 </script>