Vue基础_vue 2.6 项目讲解-CSDN博客

本文链接：https://blog.csdn.net/m0_65769258/article/details/123104705

(1) 前端技术发展历程#

纯原生 JavaScript
jQuery（仅仅是提高了 DOM 操作的效率）
框架时代
框架发展: 纯原生js -> prototype.js -> jQuery.js -> backbone.js+knockout.js -> angular.js -> vue.js+react.js

(2) Vue介绍#

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一款非常优秀的前端渐进式 JavaScript 框架
- Vue 本身只是一个用于数据驱动视图更新的库
- 随着生态的慢慢发展，如今已经有了 Vue Router、Vuex、Vue CLI、Vue Server Renderer 等功能库，所以当 Vue 和这些核心功能库结合到一起的时候，我们称之为一个框架
- 这些技术一般也称之为 Vue 全家桶，所以学习 Vue 实际上就是要学习 Vue 全家桶才能发挥出 Vue 的威力
由尤雨溪开发并于 2014 年 2 月开源于 Github(14w+ ⭐️)
可以轻松构建 SPA 应用程序
通过指令扩展了 HTML，通过表达式绑定数据到 HTML,通过组件化开发极大的提高了开发的效率和可维护性
最大程度上解放了 DOM 操作

(3) Vue核心思想#

Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性，最为核心的是：

数据驱动
- DOM 是数据的一种自然映射
- 数据改变自动驱动视图更新
组件化

(4) 相关资料#

Vue.js 官网
介绍 | Vue CLI vue脚手架

基础命令

1.差值表达式

v-text，v-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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>  
    <div id="app">  
        <p>{{msg}}</p>
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-html="str"></p>
    </div> 

    <script> 
        let app = new Vue({
            el: '#app',
            data:{
                msg:'hello world',
                str:"<button>这是一个按钮</button>"
            }
        })
        
    </script> 
</body>
</html>

2.v-model

双向绑定的作用，需要input框内使用

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
        <p>{{username}}</p>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data:{
                username: '张三'
            }
        })
    </script>
</body>
</html>

3.v-bind

v-bind语法糖，用：简写

（1）绑定class属性

<!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>
    <style>
        .red{
            background-color: red;
        }
        .f30{
            font-size: 30px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-bind:class="{red:flag,f30:flag}">{{msg}}</p>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                flag: true,
                msg:"今天是星期四，天晴"
            }
        })
        
    </script>
</body>
</html>

（2）v-bind也可以是绑定class属性的三目运算符，

：class=“flag？‘red’：‘’”，当为一个值是：class=‘数值’，该标签的class值为一个数值。

（3）v-bind也可以绑定style属性

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <p :style="{color:aaa,fontSize:bbb}">牛马小生活</p>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data:{
                aaa:'red',
                bbb:'30px',
            }
        })
    </script>
</body>
</html>

4.v-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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>请选择省份</p>
        <button @click="clickFn('广东')">广东</button>
        <button @click="clickFn('深圳')">深圳</button>
        <button @click="clickFn('湖南')">湖南</button>
        <button @click="clickFn('北京')">北京</button>
    </div>
    <script>
        let app = new  Vue({
            el:'#app',
            data:{},
            methods:{
                clickFn(city){
                    alert(city)
                }
            }
        })
    </script>
</body>
</html>

ps：批量复制，ctrl加d，后用shift来调节调节复制的文档

小心@click="clickFn('湖南')",双引号里面必须单引号，不然会出不来

5.渲染

v-if和v-show的区别，

v-if是从dom上删除了这个标签节点，

v-show是设置了这个标签节点的display：none，

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        
        <p v-show="show">pp</p>
        <p v-else>ppp</p>
        <p v-show="istrue">ppp</p>
        <p v-if="show">p</p>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                show:true,
                istrue:false
            }
        })
    </script>
</body>
</html>

6.v-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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul v-for="(item,index) in list">
            <li>
                {{index+1}}，{{item.name}}，{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                list:[
                    {name:'zhangsan1',age:18,id:'001'},
                    {name:'zhangsan2',age:18,id:'002'},
                    {name:'zhangsan3',age:18,id:'003'},
                    {name:'zhangsan4',age:18,id:'004'},
                ]
            },

        })
    </script>
</body>
</html>

语法： v-for="(item,index) in list"

7.computed计算属性

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <span>单价{{price}}</span>
            <input type="text" v-model="num" placeholder="请输入数量">
        </p>
        <p>合计：{{total}}</p>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                price:30,
                num:0
            },
            computed:{
                total(){
                    return this.price*this.num
                }
            }
        })
    </script>
</body>
</html>

ps：在computed用app.price*app.num,会报错，最好使用this。更加直观更加方便，

computed下面定义的total(),return 返回谁，{{total}}就是谁

8.监听器 watch

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>价格{{price}}</p>
        <input type="text" v-model="num">
        <p>总价格:{{total}}</p>
        <p>{{msg}}</p>
    </div>
    <script>
        let app = new  Vue({
            el: "#app",
            data:{
                price:30,
                num: 0,
                total: 0,
                msg: ''
            },
            watch:{
                num(){
                    this.total = this.price * this.num;
                    if(this.total>100){
                        this.msg = '价格不够'
                    }else{
                        this.msg='';
                    }
                }
            }
        })
    </script>
</body>
</html>

ps：

同一个功能 computed 和 watch 都能实现，能用 computed 的时候一般都用 computed，更简洁
computed擅长根据多个属性得到一个新的属性, watch擅长监听某个属性, 然后去修改多个属性

9.refs

refs用来获取原生dom节点或者子组件实例

<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
      <div ref="box">这个一个div标签</div>
    </div>
    <script>
        new Vue({
          el: '#app',
          data: {
            
          },
          created() {
            console.log(this.$refs['box']);
          },
          mounted() {
            console.log(this.$refs['box']);
          }
        })
    </script>
</body> 
</html>