Vue学习笔记（1）

阳光穿透心脏的1/2处 2024-04-23 20:02 53阅读 0赞

#### 1. Vue 是什么？ ####

Vue是一套用于构建用户界面的渐进式 Javascript 框架。  
渐进式：

*  Vue 可以自底向上逐层的应用
 *  对于简单应用：只需要一个轻量小巧的核心库
 *  对于复杂应用：可以引用各式各样的 Vue 插件

#### 2. Vue 的特点 ####

*  采用组件化模式，提高代码的复用率，且让代码更好的维护。
 *  声明式编码，让编程人员无需用 JS 直接操作 DOM，提高开发效率。
 *  使用虚拟 DOM + 优秀的 Diff 算法，尽量复用 DOM节点。

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

#### Vue模板语法：两大类 ####

1. 插值语法：
            功能：用于标签体内容。
            写法：{
       {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
        2. 指令语法：
            功能：用于解析标签（包括：属性标签、标签体内容、绑定事件...）。
            举例：v-band:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式。
                 且可以直接读取到data中的所有属性。
            备注：Vue中有很多指令，且形式都是：v-???，此处只是拿v-band举个例子

<!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>模板语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好，Jack</h3>
            <h4>你好，{
       {name}}</h4>
            <hr>
            <h1>指令语法</h1>
            <a href="http://www.atguigu.com">点我去学习1</a>
            
            
            
            <a v-bind:href="url">点我去百度2</a>
            
            <a v-bind:href="url">点我去百度</a>
        </div>
        
    </body>
        <script type="text/javascript">
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    
            new Vue({
                el:'#root',
                data:{
                    name:'mack',
                    url:'http://www.baidu.com'
                }
            })
    
        </script>
    </html>

#### Vue-数据绑定 ####

Vue中有两种数据绑定的方式：  
1. 单向绑定(v-bind)：数据只能从data流向页面  
2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data  
备注：  
1. 双向绑定一般都应用在表单类元素上(如：input,select等)  
2. v-model:value 可以简写为 v-model,因为v-model默认搜集的就是value值

#### Vue-el与data的两种写法 ####

data与el的两种写法：  
1. el有2种写法:  
1) new Vue时候配置el属性  
2) 先创建Vue实例，随后再通过vm.$mount(’\#root’)指定el的值  
2. data有两种写法:  
1) 对象式  
2) 函数式  
使用组件时必须用函数式，否则会报错  
3. 一个重要原则：  
由Vue管理的函数，一定不要写箭头函数=>，一旦写了箭头函数，this就不再是Vue实例了

<!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>el与vue的两种写法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        
        <div id="root">
            <h1>你好，{
       {name}}</h1>
        </div>
    </body>
        <script type="text/javascript">
            // el的两种写法
            /* const a = new Vue({
                //el:'root', //第一种写法
                data:{
                    name:'尚硅谷'
                }
            })
            console.log(a)
    
            a.$mount('#root')//第二种写法：将解析后的Vue实例挂载到容器中 */
    
            // data的两种写法
            const a = new Vue({
                el:'root', //第一种写法
                // data的第一种写法，对象式
                /* data:{
                    name:'尚硅谷'
                } */
    
                // data的第二种写法：函数式
                // 在使用组件时，data必须使用函数式
                data:function() {
                    return {
                        name:'小明'
                    }
                },
    
            })
            console.log(a)
    
            a.$mount('#root')//第二种写法：将解析后的Vue实例挂载到容器中
    
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            
        </script>
    </html>