Vue.js学习笔记---(0)

最新推荐文章于 2020-11-22 20:46:22 发布

ASheng朝阳

最新推荐文章于 2020-11-22 20:46:22 发布

阅读量283

点赞数

分类专栏： Vue 文章标签： Vue.js

本文链接：https://blog.csdn.net/aSheng1990/article/details/84112665

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js学习笔记为学习梁灏编著《Vue.js实战》的读书笔记

这段代码展示了Vue.js最核心的功能：数据的双向绑定。在输入框中输入的内容会实时的展示在页面的h1标签内。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 实例</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好,{{ name }}</h1>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
                    el: '#app',
                    data: {
                            name: ''
                        }
                })
    </script>
</body>
</html>

通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：

var app = new Vue({
    //选项
})

el -- 用于指定一个页面中已经存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是CSS选择器。

文章开头的示例代码中，在input标签上，有一个v-model的指令，它的值对应于创建的Vue实例的data选项中的name字段，这就是Vue的数据绑定。

通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。

Vue实例本身也代理了data对象里的多有属性：

var app = new Vue({
    el: 'app',
    data: {
        a: 2
    }
})

console.log(app.a); //2

除了显示的声明数据外，也可以指向一个已有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另一个也会一起变化：

var myData = {
    a: 1
}

var app = new Vue({
    el: '#app',
    data: myData
})

console.log(app.a);  //1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); //2

//反之，修改原数据，Vue属性也会修改
myData.a = 3;
console.log(app.a); //3

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，比较常用的有：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载。
mounted el挂载到实例上后调用，一般第一个业务逻辑从这里开始。
beforeDestroy 实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。

这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例。

使用双大括号"{{ }}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Vue</title>
	</head>
	<body>
		<div id="app">
			{{ date }}
		</div>
		<script src="vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					date: new Date()
				},
				
				mounted: function(){
					var _this = this;  //声明一个变量指向Vue实例this，保证作用域一致
					var timer = setInterval(function(){
						_this.date = new Date();  //修改数据date
					},1000);
				},
				beforDestroy: function(){
					if(this.timer){
						clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
					}
				}
			})
		</script>
	</body>
</html>

如果有时就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html：

<div id="app">
    <span v-html="link"></span>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
           link: '<a href="#">链接</a>'  //link的内容将会被渲染成一个具有点击功能的a标签
        }                               //而不是纯文本
    })
</script>

如果想显示{{ }}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程。

在{{ }}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等。但Vue.js只支持单个表达式，不支持语句和流控制。

Vue.js支持在{{ }}插值的尾部添加一个管道符" ( | ) "对数据进行过滤，经常用于格式化文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Vue</title>
	</head>
	<body>
		<div id="app">
			{{ date | formatDate }}
		</div>
		<script src="vue.js"></script>
		<script>
            //在月份、日期、小时等小于10时前面补0
			var padDate = function(value){
				return value < 0 ? '0' + value : value;
			}
			
			var app = new Vue({
				el: '#app',
				data: {
					date: new Date()
				},
				
				filters: {
					formatDate: function(value){  //这里的value就是需要过滤的数据
						var date = new Date(value);
						var year = date.getFullYear();
						var month = padDate(date.getMonth() + 1);
						var day = padDate(date.getDate());
						var hours = padDate(date.getHours());
						var minutes = padDate(date.getMinutes());
						var seconds = padDate(date.getSeconds());
						return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
					}
				},
				
				mounted: function(){
					var _this = this;  //声明一个变量指向Vue实例this，保证作用域一致
					var timer = setInterval(function(){
						_this.date = new Date();  //修改数据date
					},1000);
				},
				
				beforeDestroy: function(){
					if(this.timer){
						clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
					}
				}
			})
		</script>
	</body>
</html>

过滤器也可以串联，而且可以接收参数。

指令是Vue.js模板中最常用的一项功能，它带有前缀v-。

指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上，以v-if为例：

<div id="app">
    <p v-if="show">显示这段文本</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                show: true  //当show的值为true时，p元素会被插入，为false时则会被移除
        }
    })
</script>

数据驱动DOM是Vue.js的核心理念，所以尽量不要主动操作DOM，只需要维护好数据，DOM的事Vue会优雅的处理。

v-bind的基本用途是动态更新HTML元素上的属性，比如id、class等：

//链接地址与图片的地址都与数据进行了绑定
//通过各种方式改变数据时，链接和图片都会自动更新

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgurl">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url:'https://www.github.com',
            imgurl:'https://xxx.xxx.xx/img.png'
        }
    })
</script>

v-on用来绑定事件监听器：

<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                show: true
        },

        methods: {
            handleClose: function(){
                this.show = false;
            }
        }
    })
</script>

使用v-on:click给button按钮绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件。

表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身，也可以是一个内联语句，如上例代码，也可以在button按钮中直接写：v-on:click="show=flase" 。

Vue.js将methods里的方法也代理了，所以也可以像访问Vue数据那样来调用方法：

<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        
        methods: {
            handleClose: function(){
                this.close();
            },
            
            close: function(){
                this.show = false;
            }
        }
    })
</script>

上述代码只是用于演示它的用法，在业务中会经常用到，例如还有以下几种用法都是正确的：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        
        methods: {
            init: function(text){
                console.log(text);
            }
        },

        mounted: function(){
            this.init('在初始化时调用');  //在初始化时调用
        }
    });

    app.init('通过外部调用');  //在Vue实例外部调用
</script>

语法糖：

v-bind：可以省略v-bind，直接写一个冒号":"。
v-on：可以直接用"@"来缩写。

ASheng朝阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记---(0)

Vue.js学习笔记为学习梁灏编著《Vue.js实战》的读书笔记这段代码展示了Vue.js最核心的功能：数据的双向绑定。在输入框中输入的内容会实时的展示在页面的h1标签内。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue 实例...
复制链接

扫一扫