Vue.js实战之系统学习第二节_vue中在js中创建一个span标签并push进去-CSDN博客

本文链接：https://blog.csdn.net/weixin_41530824/article/details/88420375

想看上一节请点击上面的链接。

在上一节中，我们已经开启了Vue.js大门，这一节，让我们真正的进入Vue的世界吧。

老办法，先敲代码，看一下这节课要学的东西。

<!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>

效果展示：

这就是我们前面一直提到的双向绑定，就是在输入框输入的内容会实时的展示在页面的h1标签内。

接下来我们对其中昂的对象以及属性进行讲解

var app = new Vue({})

看上面这行代码，这就是Vue的构造函数，可以创建一个Vue的根实例，并启动Vue应用，需要注意的是，在这里几乎所有的代码都是一个对象，写入Vue实例的选项内的。

首先，必不可少的选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器，比如：

el: document.getElementById ( 'app ') ／／或者是 '＃app '

挂载成功后我们可以通过app.$el来访问该元素。Vue提供了很多常用的实例属性与方法都以$开头，比如$el，后续还会介绍更多有用的方法。

在input标签上，有一个v-model的指令，它的值对应于我们创建在Vue实例的data选项中的name字段，这就是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实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期的钩子，我们可以利用钩子，在适合的时机执行我们的业务逻辑。如果你使用过jQuery，一定知道它的ready（）方法

&(document).ready(function(){
    // DOM加载完后，会执行这里的代码
});

Vue的生命周期钩子与之类似，比较常用的有：

created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未加载，$el还不可用。需要初始化处理一些数据时会比较有用。

mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

beforeDestroy 实例销毁之前调用。主要是解绑一些使用的addEventListener监听的事件等。

可能刚开始进入IT行业的人可能不是很理解，但是代码上来后你就明白了

var app = new Vue({
    el:'#app',
    data:{
        a:2
    },
    created:function(){
        console.log(this.a); //2
    },
    mountend:function(){
        console.log(this.$el); //<div id = "app"></div>
    }
})

插值与表达式

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

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

<div id="app">
	<span v-html="link"></span>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
	var app = new Vue({
		el:'#app',
		data:{
		   link:'<a href=#">link</a>'
		}
	})
</script>

link的内容会被渲染为一个具有点击功能的a标签，而不是纯文本。

注意：如果将用户产生的内容使用v-html输出后，有可能导致XSS攻击，所以要在服务器端对用户提交的内容进行处理，一般可将尖括号"<>"转义。

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

<span v-pre>{{这里的内容是不会被编译的}}</span>

在{{}}中，除了简单的绑定属性外，还可以使用JavaScript表达式进行简单的运算、三元运算等。

<div>
    {{ number/10 }}
    {{ isOK ? '确定' : '取消' }}
    {{ text.split(',').remove().join(',') }}
</div>

Vue.js只支持单个表达式，不支持语句和流程控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。以下展示一些无效的示例：

〈！一这是语旬，不是表达式 一〉 
{{var book = ' Vue . js 实战 '}}
〈！一不能使用流控制，要使用三元运算 一〉
{{ if (ok) return msg }}

过滤器

Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常使用格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通常给Vue实例添加选项filter来设置。

下面来一段代码，慢慢体会过滤器的用法（新手建议自己敲一遍，能发现日常注意点）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
            {{ date | formatDate }}
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
			// 在月份、日期、小时等小于10时前面补0
			var padDate = function(value) {
				return value < 10 ? '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，保证作用域一致；
					this.timer = setInterval(function(){
						_this.date = new Date(); // 修改数据date
					}, 1000);
				},
				beforeDesTroy: function(){
					if(this.timer){
						clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
					}
				}
            })
        </script>
    </body>
</html>

扩展：过滤器也可以串联，而且可以接收参数，例如：

<!-- 串联 -->
{{ message | filterA | filterB }}
<!-- 接收参数 -->
{{ message | filterA('arg1','arg2') }}

但要主义的是，这里的字符串arg1和arg2将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。

还有就是过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性，后续我们会继续讲解。

咱们接着讲语法

指令与事件

指令是Vue.js模板中常用的一项功能，它带有前缀v-，在前文我们已经使用过不少指令了，指令的主要指责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。

下面来个列子讲解一下：

<div id = "app">
    <p v-if = "show">显示这段文本</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data: {
            show:true
        }
    })
</script>

当数据show的值为true时，p元素会被插入，为false时则会被移除。数据驱动DOM是Vue.js的核心理念，所以不到万不得已不要主动操作DOM，你只需要维护好数据，DOM的事Vue会帮你优雅的处理。

这里再介绍两个指令。

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

<a v-bind:href = "">链接</a>
<img v-bind:src = "imgUrl">

当通过各种方式改变数据时，链接和图片都会自动更新。

v-on，它用来绑定事件监听器，这样我们就可以做一些交互了。

下面来个点击事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    <body>
        <div id="app">
            <p v-if = "show">这是一段文</p>
			<button v-on:click="handleClose">点击隐藏</button>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                   show: true
                },
				methods:{
					handleClose:function(){
						this.show = false;
					}
				}
            })
        </script>
    </body>
</html>

在button按钮上，使用v-on：click给元素绑定了一个点击事件，在普通元素上，v-on可以监听原声的DOM时间上，处理click外，还有dbclick、keyup、mousemove等。

表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前vue实例本身。

表达式除了方法名，也可以使用内联语句，上例可改写为：

<button v-on:click="show = false">点击隐藏</button>

但是不建议这样使用，如果逻辑复杂了，就很难处理了，而且后期维护也会变得复杂。

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

methods:{
    handleClose:function(){
        this.close();
    },
    close:function(){
        this.show = false;
    }
}

语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现相同的效果，从而方便程序开发。

Vue.js的v-bind和v-on指令都提供了语法糖，也就是说是缩写，比如v-bind，可以省略v-bind直接写一个冒号“:”；

v-on 可以直接用 “＠” 来缩写；
基本的语法介绍一些了，相信大家也都累了，休息一下我们进去下一节

Vue.js实战之系统学习第三节