-
vue实例和数据绑定
- 环境搭建
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
通过构造幻术Vue就可以创建一个Vue的根实例，并启动Vue应用---入口
var app = new ({
el:'',
data:{
}
})
-
必不可少的一个选项是==el==用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是标签，也可以是CSS语法。（通常会指定到id 或者class）
-
通过Vue市里的 datax选项，可以声明应用内需要双向绑定的数据。建议所有会用到数据都预先在data内声明，这样不至于将数据散落到业务逻辑中，难以维护，也可以指向一个已经有的变量。
-
挂载成功后，我们可以通过 ==app.$el==来访问该元素。
访问实例的属性：都是以
el
--访问data元素的属性 直接app.属性名
var app = new Vue({
el:'',
data:{
msg:'开始学习vue了'
}
});
app.msg就可以了
-
生命周期钩子
jquery---$(document).ready()
created实例创建完成后调用，此截断完成了数据的观测等，但尚未挂载，$el还不可以用。需要初始化处理一些数据时会比较有用。-----还未挂载
mounted el挂载到实例上后调用，相当于$(document).ready()-----刚刚挂载
beforeDestroy 实例销毁以前调用。主要解绑一些使用 addEventListener监听的事件等
-
文本插值和表达式
语法： ==使用双大括号{{}}是最基本的文本插值方法，他会自动将我们双向绑定的数据实时显示出来==
在{{}}中，除了简单的绑定属性值外，还可以使用js表达式进行简单的运算、三元运算等
---
Vue.js只支持单个表达式，不支持语句和流控制。
{{ 6+6 *3}} ---可以进行简单的运算<br>
{{ 6<3 ? msg : a}}--- 可以用三元运算符<br>
{{ if(6>3){} }}----注意：文本插值的形式牟其中不能书写表达式，支持单个表达式
-
过滤器
Vue.支持在{{}}插值的尾部添加一小管道符“|”对数据进行过滤，经常用于格式化文本，比如大幕全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置
{{data|filter1|filter2}}
{{data|formatDate(66,99)}}中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数
-
指令和时间
指令（Directives）是Vue模板中最常用的一项功能，他带有前缀v-，能帮我们快速完成DOM操作。玄幻渲染。显示和隐藏
v-text:--------解析文本和{{}}作用一样
v-html:--------解析html
v-bind:--------v-bind 的基本用途是动态更新HTML元素上的属性，比如id、class等
v-on:---------用来绑定事件监听器
v-on具体介绍
在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dblclick,keyup,mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内并且是函数的形式，函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据
一个自己做的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.transRed{
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<div id="dateApp">
<hr>
<!--过滤器,| 后面接的是过滤器的名字-->
<!-- {{date}} <br>
{{date | formatDate}}
<!–过滤器的串联–>-->
<!--{{ data | filter1 | filter2}}-->
<!--过滤器的参数-->
{{date | formatDate(66,99)}}
<hr>
指令和事件 <br>
v-text指令：
{{apple}}<br>
<span v-text="apple"></span>
<hr>
v-html指令: 解析html <br>
{{banana}} <br>
<span v-text="banana"></span> <br>
<span v-html="banana"></span>
<hr>
v-bind指令：绑定活的属性 <br>
<!-- <div class="{{className}}"></div>//拿不到
<div class="className"></div>//拿不到-->
<div v-bind:class = "className"></div>
<div :class = "className"></div>
<hr>
v-on指令：绑定事件监听器 <br>
<!-- 为按钮添加监听事件-->
<button v-on:click = "count">{{countnum}}</button>
<button @click = "count">{{countnum}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
/* 需求：在页面中实时显示当前时间*/
//在月份，日期，小时小于10的时候补0
var plusDate =function (value) {
return value<10? '0'+value : value
}
var app = new Vue({
el:"#dateApp",
data:{
date: new Date(),
apple:'苹果',
banana:'<span style="color: yellow;">香蕉</span>',
className :'transRed',
countnum:0
},
//定义过滤器
filters:{
//这里的value就是需要过滤的数据
formatDate: function(value,a,b){
//将字符串转化为date类型
var date = new Date(value);
var year = date.getFullYear();//年
var month = plusDate(date.getMonth()+1);//月
var day = plusDate(date.getDate());//日
var hours = plusDate(date.getHours());
var min = plusDate(date.getMinutes());
var sec = plusDate(date.getSeconds());
//将整理好的数据返回
return year +'--'+month +'--'+day +' '+hours+'--'+min+'--'+sec+a+b;
}
},
methods:{
count:function () {
this.countnum = this.countnum +1;
}
},
mounted:function(){
var _this = this;//this代表的就是vue实例
//setInterval();定时器
this.timer = setInterval(function(){
_this.date = new Date();
},1000)
},
beforeDestroy:function(){
//如果定时器存在，就清除定时器
if(this.timer){
clearInterval(this.timer)
}
}
})
</script>
</body>
</html>
网友评论