Vue学习笔记(1)

阅读数: 次 2022-08-18

文章导航

Vue学习笔记

简介，绑定属性，计算属性…

Vue简介

本质就是自定义属性
Vue中指定都是以 v- 开头

Vue使用

el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

在实例对象中的称为方法；在类外面的称为函数

方法: method
函数: function

Vue中的MVVM

View层：

视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

Vue生命周期

生命周期: 事物从诞生到消亡的整个过程.

Vue指令

hello测试

<div id="app">
    <h3>{{message}}</h3>
    <h6>署名：{{name}}</h6>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<!--编程范式：声明式编程-->
<script>
    //			let:定义变量;const:定义常量
    const app =  new Vue({
        el: '#app',//用于挂载要管理的数据
        data: {//定义数据
            message: "Hello World!",
            name: "张三"
        }
    })
</script>

计数器

<div id="app">
    <h2>当前计数{{counter}}</h2>
    <!--			<button v-on:click="counter++">+</button>-->
    <!--			<button v-on:click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>


<script type="text/javascript" src="js/vue.js" ></script>
<script>
    //			简写
    const obj = {
        counter: 0,
        message: "调用这个函数"
    }
    const app = new Vue({
        el: '#app',
        data: obj,
        methods: {
            add: function(){
                console.log("add执行成功");
                this.counter++;
            },
            sub: function(){
                console.log("sub执行成功");
                this.counter--;
            }
        },
        //				生命周期函数
        created: function(){
            console.log("执行created");
        },
        mounted: function(){
            console.log("执行mounted");					
        }
    })
</script>

列表遍历

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '列表',
            movies: ["三国演义","红楼梦","水浒传","西游记"]
        }
    })
</script>

Mustache插值操作

通过Mustache语法(双大括号)。

<div id="app">
    <h3>{{message}}</h3>
    <h5>{{firstName + ' ' + lastName}}</h5>
    <h5>{{firstName }} {{lastName}}</h5>
    <h5>{{counter * 2}}</h5>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<!--编程范式：声明式编程-->
<script>
    //			let:定义变量;const:定义常量
    const app =  new Vue({
        el: '#app',//用于挂载要管理的数据
        data: {//定义数据
            message: "你好啊!",
            firstName: "上官",
            lastName: "婉儿",
            counter: 100
        }
    })
</script>

v-ones指令

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变, 只触发一次回调。

1 2	<!--v-ones不会发生改变--> <h3 v-ones>{{message}}</h3>

v-html指令

该指令后面往往会跟上一个string类型;
会将string的html解析出来并且进行渲染;

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只能在可信内容上使用 v-html，不能用在用户提交的内容上。

1
2
3

<h3>{{url}}</h3>
<!--v-html使用html格式展示-->
<h3 v-html="url"></h3>

v-text指令

更新元素的 textContent。如果要更新部分的 textContent ，需要使用插值。

1
2
3

<h3>{{message}}</h3>
<!--v-text会覆盖标签中文本-->
<h3 v-text="message">张三</h3>

v-pre指令

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

1
2
3

<h3>{{message}}</h3>
<!--v-pre显示原本语法-->
<h3 v-pre>{{message}}</h3>

v-clock指令

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3 v-cloak>{{message}}</h3>
    </div>

    <script type="text/javascript" src="js/vue.js" ></script>
    <script>
        setTimeout(function(){
            const app =  new Vue({
                el: '#app',
                data: {
                    message: "你好啊!"
                }
            })
            },1000);
    </script>		
</body>

v-bind绑定属性

作用：动态绑定属性

1、绑定属性

动态的来切换class。

<div id="app">
    <!--错误的写法，这里不可以使用mustache语法-->
    <!--<img src="{{imgURL}}" alt="" />--> 
    <img v-bind:src="imgURL"/>
    <a v-bind:href="baidu">百度一下</a>


    <!--简写模式(:)-->
    <img :src="imgURL"/>
    <a :href="baidu">百度一下</a>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app =  new Vue({
        el: '#app',
        data: {
            imgURL: "https://gitee.com//yafine66/blogimage/raw/master/img/loading3.gif",
            baidu: "http://www.baidu.com"
        }
    })
</script>

2、绑定class

对象语法的含义是:class后面跟的是一个对象。

<style>
    .active{
        color: red;
    }
    .line{
        font-size: 30px;
        font-family: "bookshelf symbol 7";
    }
</style>

<div id="app">
    <h3 class="active">{{message}}</h3>
    <!--<h3 :class="{类名1:boolean1,类名2:boolean2}"></h3>-->
    <!--大括号里是多个对象
v-bind:class中的对象是可有可无的
class中的类是一定有的
-->
    <h3 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h3>
    <button v-on:click="btnClick">按钮</button>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app =  new Vue({
        el: '#app',
        data: {
            message: "你好啊！",
            isActive: true,
            isLine: true
        },
        methods:{
            btnClick: function(){
                this.isActive = !this.isActive;
            }
        }
    })
</script>

数组语法的含义是:class后面跟的是一个数组。

<div id="app">
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>			
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            active: 'aaa',
            line: 'bbb'
        },
        methods: {
            getClasses: function(){
                return [this.active,this.line];
            }
        }
    })
</script>

3、绑定style

利用v-bind:style来绑定一些CSS内联样式。

我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，需要单引号括起来) ‘font-size’

对象语法

<div id="app">
    <!--<h2 :style="{'key(属性名)': value(属性值)}">{{message}}</h2>-->	

    <!--50px必须加''号-->
    <h2 :style="{fontSize: '50px'}">{{message}}</h2>						

    <!--finalSize当成变量使用-->
    <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>

    <h2 :style="getStyles()">{{message}}</h2>			
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            finalSize: 100,
            finalColor: 'red',
        },
        methods: {
            getStyles: function(){
                return {fontSize: this.finalSize + 'px', color: this.finalColor};
            }
        }
    })
</script>

数组语法

<div id="app">
    <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>			
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            baseStyle: {backgroundColor:'red'},
            baseStyle1: {fontSize:'50px'},

        }
    })
</script>

计算属性

有时候需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

1、基本使用

字符串拼接

<div id="app">
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{getfullName&#40;&#41;}}</h2>			
    <h2>{{fullName}}</h2>					    
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            firstName: '西门',
            lastName: '吹雪'
        },		        
        //计算属性 computed()
        computed: {
            fullName: function(){
                return this.firstName + ' ' + this.lastName
            }
        },
        methods: {
            getfullName: function() {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

计算总价

<div id="app">
    <h2>总金额：{{totalprice}}</h2>			
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books:[
                {id:1, bname:'《疑似》', price:15.20},
                {id:2, bname:'《渐欲》', price:30.59},
                {id:3, bname:'《落花》', price:25.32},
                {id:4, bname:'《灵雨》', price:104.50},
            ]
        },
        computed: {
            totalprice: function(){
                let result = 0;
                //		        		for(let i=0; i<this.books.length; i++){
                //		        			result += this.books[i].price;
                //		        		}
                //		        		return result;

                for(let book of this.books){
                    result += book.price;
                }
                return result;
            }
        }
    })
</script>

2、计算属性的getter和setter

每个计算属性都包含一个getter和一个setter

<div id="app">
    <h2>{{fullName}}</h2>			
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            firstName: "诸葛",
            lastName: "孔明"
        },
        computed: {
            fullName: {
                //计算属性一般没有set方法，只读属性
                set: function(newValue){
                    const names = newValue.split(" ");
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                get: function(){
                    return this.firstName +" "+ this.lastName
                }
            }
        }
    })
</script>

3、计算属性的缓存

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

<div id="app">
    <!-- 1.直接拼接 -->
    <h2>{{firstName}} {{lastName}}</h2>
    <!-- 2.定义methods
重复加载，浪费资源
-->
    <h2>{{getFullName&#40;&#41;}}</h2>
    <!-- 3.通过computed
重复内容，只加载一次
-->
    <h2>{{fullName}}</h2>
</div>

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            firstName: "诸葛",
            lastName: "孔明"

        },
        methods:{
            getFullName: function(){
                console.log("methods");
                return this.firstName +" "+ this.lastName;
            }
        },
        computed: {
            fullName: function(){
                console.log("computed");
                return this.firstName +" "+ this.lastName;
            }
        }
    })
</script>

本文作者： 腾飞
本文链接： https://www.tengfei.eu.org/article/bf9530d9.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！