初识vue

Posted 2021-02-02 lingcai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识vue相关的知识，希望对你有一定的参考价值。

---恢复内容开始---

vue官方文档

1.什么是vue?

vue是前端的框架,jquery是前端的库前端的三大框架是vue(尤雨溪),angular(google),react(facebook) 后端的三大框架是Django,tornado,flask

2.如何使用vue?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    # 第一步 引入
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="static/vue.min.js"></script>
</head>
<body>
# 第二步 创建作用域
<!--<div id="box1" >{{ link }}</div>-->
<div id="box"  v-text=‘a‘>

</div>
<script>
# 第三步 创建一个vue实例
    new Vue({
        el:(‘#box‘),  # 查找作用域
        data:{
            a:"今晚吃鸡"
        }
    })
</script>
</body>
</html>

　VUE.JS的模板语法 {{}} 同django的模板语法类似

常见的模板语法

1. {{  变量a + 变量b }} 算法运算 字符串拼接
2. {{ ‘河边的一只小青蛙‘ }} 渲染变量
3. {{ 1>2?"大于":"错误"}}  三元表达式
4. {{ {1:"小明"} }}   渲染出一个字典

　　vue指令系统

指令以v-开头,用来操作标签的文本值,属性,或者绑定事件

1. v-text: 渲染文本值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
    <div id="app01">
        <div v-text="name"></div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                name: "Alex"
            }
        })
    </script>

</body>
</html>

2. v-html 渲染HTML原始的标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
    <div id="app01">
        <div v-html="vue"></div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                vue: ‘<h1>Hello Vue!</h1>‘
            }
        })
    </script>

</body>
</html>

3.v-for 相当于python中的for循环主要操作数组和对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="../vue模板语法之插值/vue.js"></script>
</head>
<body>
    <div id="app01">
        <h2>alex的爱好</h2>
        <ul>
            <li v-for="item in qianqian">{{ item }}</li>
        </ul>
        <h2>学生的爱好</h2>
        <ul>
            <li v-for="stu in students">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
        </ul>
    </div>

    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                qianqian: [
                    "学习",
                    "逛街",
                    "美甲"
                ],
                students: [
                    {
                        name: "alex",
                        hobby: "girls"
                    },
                    {
                        name: "peiqi",
                        hobby: "girls"
                    },
                    {
                        name: "pizza",
                        hobby: "study"
                    }
                ]
            }
        })
    </script>
</body>
</html>

　4. v-if 判断条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <div v-if="role == ‘shanshan‘">
            <h2>欢迎小美女</h2>
        </div>
        <div v-else-if="role == ‘longting‘">
            <h2>欢迎小龙女</h2>
        </div>
        <div v-else>
            <h2>滚~~~</h2>
        </div>
    </div>

    <script>
        // 请注意看HTML标签元素，v-if底层使用appendChild实现
        let app01 = new Vue({
            el: "#app01",
            data: {
                role: "shanshan"
            }
        })
    </script>
</body>
</html>

　5.v-show 判断标签是否显示类似v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <h1 v-show="isShow">Hello Vue!</h1>
    </div>

    <script>
        // v-show的实现原理是通过控制样式的display
        let app01 = new Vue({
            el: "#app01",
            data: {
                isShow: true
            }
        })
    </script>

</body>
</html>

注意:v-if 与v-show的区别:

实现方式:v-if底层采用的是appendChild来实现的,v-show是通过样式的display
控制标签的显示.因为实现方式上有区别,所以加载速度,渲染开销也会不同.

加载性能:v-if加载速度更快,v-show加载速度相对慢一些
切换开销:v-if切换开销大,v-show切换开销小

v-if是惰性的,它是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建,如果初始渲染是条件为假,则什么也不做--直到条件为真时,才开始渲染条件块,.
v-show就简单地多,不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换
一般来说,非常频繁的切换使用v-show 运行条件很少改变,使用v-if较好.

6. v-bind (简写 :) 绑定属性

class属性操作
<div id="app">
    <div :class="[box, active]"></div> # 可以放多个属性
    <div :class="{box1: 1>2, box2: 2>1, active: 1===1}"></div>   # 可以做条件判断(这里判断条件固定写死了)
</div>

7.v-on(简写 @) 绑定事件

   v-on:click="myClick" 或 @click=‘myClick‘
   注意：属性通过vue绑定的时候，必须加上冒号
   
<div id="app">
  <div id="box" :class="1">小马哥</div>
  <button v-on:click="changeColor" >点击让小马哥变绿</button>
</div>

methods: {
       changeColor: function () {
       			this.box = ‘box2‘;
                }
            }

8. v-model 双向数据绑定

双向是指可以把data里面的数据渲染到页面又可以在前端页面上修改渲染的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app01">
        <p>请选择你的性别</p>
        <br>
        <input v-model="name"/>
        <p><input type="text" v-model="name"/></p>
        <p>
            <input type="checkbox" value="男" v-model="gender"/>
            <input type="checkbox" value="女" v-model="gender"/>
        </p>
        <br>
        {{ name }}
        {{ gender }}

        <p>请选择你的女朋友</p>
        <select name="" id="" v-model="girlFriends">
            <option>alex</option>
            <option>pizza</option>
            <option>peiqi</option>
        </select>
        <br>
        {{ girlFriends }}

        <p>
            <textarea v-model="article"></textarea>
        </p>
        <br>
        {{ article }}
    </div>
    <script src="./vue.js"></script>
    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                name: "alex",
                gender: [],
                girlFriends: [],
                article: "这是一篇文章",
            }
        })
    </script>
</body>
</html>

9.指令修饰符为了对用户输入的数据类型进行限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python基础</td>
                    <td><input type="text" v-model.number="python"/></td>
                </tr>
                <tr>
                    <td>前端</td>
                    <td><input type="text" v-model.lazy="web"/></td>
                </tr>
                <tr>
                    <td>Django</td>
                    <td><input type="text" v-model.trim="django"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                python: 75,
                web: 98,
                django: 88
            }
        })
    </script>

</body>
</html>

10.计算属性:computed

计算属性用来监听多个数据,每次页面加载,计算属性中的函数立即执行,但是只要原始数据不被修改,那么就不会重新触发计算,计算属性会使用计算后的缓存结果,只有当原始数据修改时,才会重新计算并将结果缓存,计算结果可以当做data中的数据一样使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app01">
        <table border="1">
            <thead>
                <tr>
                    <th>学科</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python基础</td>
                    <td><input type="text" v-model.number="python"/></td>
                </tr>
                <tr>
                    <td>前端</td>
                    <td><input type="text" v-model.trim="web"/></td>
                </tr>
                <tr>
                    <td>Django</td>
                    <td><input type="text" v-model.lazy="django"/></td>
                </tr>
                <tr>
                    <td>总分</td>
                    <td>{{ python + web + django }}</td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <td>{{ avgScore }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 计算属性放在缓存当中，只有数据修改时才重新计算
        let app01 = new Vue({
            el: "#app01",
            data: {
                python: 75,
                web: 98,
                django: 88
            },
            computed: {
                sumScore: function () {
                    return this.python + this.web + this.django;
                },
                avgScore: function () {
                    return this.sumScore/3;
                }
            }
        })
    </script>

</body>
</html>

11. 侦听属性 watch

页面加载时不执行,只在数据被修改后触发相应事件,使用侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <p>Original message: {{ message }}</p>
    <p>Computed message: {{ reversedMessage }}</p>
    <p>Full name: {{ fullName }}</p>
    <p><input type="text" v-model="firstName"/></p>
    <p><input type="text" v-model="lastName"/></p>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        firstName: "Foo",
        lastName: "Bar",
        fullName: "Foo Bar",
      },
      computed: {
        reversedMessage: {
          get: function () {
            console.log(1);
            // 多次刷新reversedMessage不会改变, 除非message发生改变
            return this.message.split(‘‘).reverse().join(‘‘);
          }
        }
      },
      watch: {
        firstName: function (value) {
          console.log(value);
          this.fullName = value + ‘ ‘ + this.lastName
        },
        lastName: function (value) {
          console.log(value);
          this.fullName = this.firstName + ‘ ‘ + value
        }
      }
    })
  </script>
</body>
</html>

---恢复内容结束---

以上是关于初识vue的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Java初识方法

VSCode自定义代码片段11——vue路由的配置