day3-01 初始vue

最新推荐文章于 2024-10-04 00:46:18 发布

serendipitymm

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量63

点赞数

文章标签： vue.js npm node.js

本文链接：https://blog.csdn.net/serendipitymm/article/details/121080750

版权

1、淘宝镜像

npm的下载是需要访问国外服务器才可以下载，国内访问很慢，所以淘宝集团自行搭建了一个服务器，这个服务器每隔十分钟就会把npm国外服务器的内容拉进去一次，这就叫淘宝镜像。

要使用需要配置：npm i -g cnpm --registry=https://registry.npm.taobao.org

2、什么是html标签的属性？

扩展标签的功能

属性的语法：必须写在开标签中属性=“属性值”

3、vue

1.vue是什么

vue.js是现今最为主流的MVVM框架

作者：尤雨溪前google员工

2.MVVM

mvvm是一个编程的思想，在这个思想下，更加专注于业务的开发（功能），让我们的开发变得更简单

M model 模型=数据

V view 视图=界面（就是你写出来让用户看见的内容）

VM viewmodel 视图模型，用来传递模型和关联视图的

3.vue初体验

获取vue的依赖库 npm install --save 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>Document</title>
    <!-- 
        1.下载包
        2.引包 -->
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!-- M    ------model     模型 = 数据

    V    ------ view         视图 = 界面（就是你写出来让用户看见的内容）

    VM    --- viewmodel     视图模型      用来传递模型和关联视图的 -->

    <!-- 3.新建v层 -->
    <div id="demodiv">
        {{text}}
    </div>
    <script>
// <!-- 4.新建vm层    就是vue实例 -->
        new Vue({
            el:"#demodiv",
            // 5.编写m层
            data:{
                text:"你好么么哒！！！！！^_@"
            }
        })
    </script>
</body>
</html>

4.{{}}是什么

{{}}大括号赋值法/双大括号语法/模板语法

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>双大括号赋值法</h1>
        <h1>{{text}}</h1>
        <h1>{{num+2}}</h1>
        <h1>{{bool?"你好":"你坏"}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"字符串",
                num:18,
                bool:false,
                arr:[1111,22222,33333,44444],
                obj:{
                    name:"xixi",
                    age:18
                }
            }
        })
    </script>
</body>
</html>

5.vue渲染数据

vue.js的核心就是数据驱动，vue的数据驱动就是视图的内容是根据模型data数据的改变而改变的

数据驱动的分类

1.声明式渲染，我们只需要告诉程序，想干什么，程序就会自动完成

2.命令式渲染，我们需要一步步的指挥着程序，程序才会按照我们的指令去执行

6.指令

在vue中，使用v-开头html特殊属性

指令的作用：在vue中扩展标签的功能

指令的语法：写在html开标签中并且v-指令=“指令值”

v-model

作用：用于在表单元素上完成数据的双向绑定

语法：v-model=“值”

双向绑定

用户在可以看见的界面中也就是v层视图层改变了数据那么data中的内容也就会改变，视图变模型

模型改变了反之也会让视图发生改变模型变视图

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-model</h1>
        <!-- 双向绑定
        用户在可以看见的界面中也就是v层视图层   改变了数据 那么data中的内容也就会改变   视图变模型变

        模型改变了   反之也会让视图发生改变   模型变视图变 -->
        <input type="text" v-model="inputval"/>

        <h1>{{inputval}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                inputval:""
            }
        })
    </script>
</body>
</html>

双向绑定的原理

双向绑定是通过 数据劫持与发布者订阅模式来实现的

数据劫持：数据（变量）劫持（拦截）就是当数据改变的时候，要拦截到这次改变，通知模型或者视图发生改变

通过一个Object.defineProperty（）来监听数据当数据改变的时候他就会被触发，从而通知另外一方（有一个get的方法和set的方法，分别是读取与修改）

发布者订阅模式：就是一个一对多的关系，当发布者改变了其所有的订阅者页随之发生改变

v-show

作用：控制dom元素的显示和隐藏

语法：v-show=“返回值为布尔值的表达式” true显示 false 隐藏

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-show</h1>
        <!-- 如果给一个复选框绑定一个变量  那么这个变量会随着勾选和取消在true和false中切换 -->
        <input type="checkbox" v-model="bool"/>{{bool?"显示了":"隐藏了"}}
        <h1 v-show="bool">我是测试显示和隐藏的元素</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                bool:true
            }
        })
    </script>
</body>
</html>

v-on

作用：就是给dom元素绑定事件

语法：v-on：事件不加on=“函数”简写就是 @事件不加on=“函数”

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-on</h1>
        <!-- 绑定事件用v-on -->
        <button v-on:click="fun()">点我绑定事件</button>

        <!-- v-on还有个简写的写法   就是把v-on:  替换成 @ -->
        <button @click="fun()">简写写法</button>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
             
            },
            // methods来创建函数
            methods:{
                // 函数名(){
                    
                // }
                fun(){
                    console.error("你好么么哒")
                }
            }
        })
    </script>
</body>
</html>

v-for

作用：遍历展示数据

语法：v-for=“ ( 参数1--便利出来的值 , 参数2-- 便利出来的下标) in 你要便利的数据 ”

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(v,i) in arr">{{v}}</li>
        </ul>
        <hr>
        <table border="1">
            <tr v-for="(v,i) in obj">

                <td>{{i}}</td>
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>
        </table>
        
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                arr:["EZ","Vn","MF","NOC"],
                obj:[
                    {name:"xixi1",age:181},
                    {name:"xixi2",age:182},
                    {name:"xixi3",age:183},
                    {name:"xixi4",age:1845},
                    {name:"xixi5",age:186},
                    {name:"xixi6",age:187}
                ]
            }
        })
    </script>
</body>
</html>

v-bind（使用中最容易忽略的指令）

作用：就是给html的属性插入变量

语法：v-bind：html标签的属性=‘变量’ 简写：

<!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="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-bind</h1>
        <!-- html的属性插变量使用v-bind -->
        <a v-bind:href="ahref">{{atext}}</a>
        <!-- 简写   v-bind: 替换成   ： -->
        <a :href="ahref">{{atext}}</a>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                atext:"点我去百度",
                ahref:"http://www.baidu.com"
            }
        })
    </script>
</body>
</html>