一、vue对象创建
<html>
<head>
<!-- 导入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
<h4 v-text="msg"></h4>
</div>
<script>
//通过构造函数创建Vue对象
var vm = new Vue({
el:'#app', //表示控制 id为App的div
data:{
msg:'123',
msg2:'<h1>haha</h1>',
mytitle:'自定义的title'
}
});
</script>
</body>
</html>
vue中常用属性
在Vue对象中有一些常用的属性以及function，下面对其总结：
var vm = new Vue({
el:'#app',
template: , //模板定义
router： , //注册router对象
data:{
'firstname':'',
'lastname':'',
'fullname':''
},
methods: {
show() {
alter('hello')
}
},
与下面等价
/*
methods: {
show:function() {
alter('hello')
}
},
*/
//私有过滤器
filters : {
filter_name:function(data, param1) {
}
},
//指令
directives: {
'fontweight': {
bind:function(el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize':function(el,binding) {//缩写形式 等同与将函数注册到bind和updated中
el.style.fontSize = binding.value
}
},
render: function(createElements) {
//形参是一个函数对象 render用于渲染组件 注意app容器中内容会被清空
return createElements(templateObject);
//templateObject是组件对象 例如 var templateObject = {template:"<h1>登录组件</h1>"}
}
components: {//私有组件 为当前vue实例创建组件
},
watch : {//监听器 监听数据改变 可以监听dom元素(例如文本框改变)以及非dom元素改变(例如路由路径改变)
'firstname':function(newValue, oldValue) {//表示监听data中firstname字段，如果firstname字段有变化则执行该函数
console.log("firstname新值："+newValue+" firstname旧值："+oldValue)
},
'$route.path':function(newValue, odlValue) {//表示监听 路由路径改变 其中$route为路经对象
console.log("route.path新值："+newValue+" route.path旧值："+oldValue)
}
},
computed: {
//使用方法：自定义属性以及处理函数
//注意事项：
// 在使用时直接使用属性名称即可，不需要(),就能调用对应的方法
// 属性处理函数中，一般会依赖一些data中数据，只要依赖的数据有变化就会出发 属性函数的执行，
// 例如：firstname改变了，这个fullname属性函数就会执行
// 属性函数结果会被缓存起来，如果属性函数中依赖的数据没有变化，即使属性被多次使用，
// 属性函数也不会被调用，而是直接使用缓存下来的结果
// 属性函数必须return一个值而watch中的函数可以没有return
'fullname':function() {
return this.firstname + '-' + this.lastname;
}
},
//生命周期分为：创建时期、运行周期、销毁时期
//创建时期：生命周期函数
beforeCreate() {
//vue中data methods没有被初始化
},
created() {
//vue中data、methods已经初始化
},
beforeMount() {//执行此函数时 模板已经编译好了，但尚未挂载到html页面中
},
mounted() {//mounted表示实例已经创建完毕
}
//运行时期：生命周期函数
beforeUpdate() {//表示vue实例的data有更新执行，但还没有渲染页面
},
updated() {//渲染页面完成之后
}
//销毁期间
beforeDestroy() {//vue实例 从运行阶段进入销毁阶段
}
destroyed() {
}
})
二、vue常用指令
1、v-cloak 用于解决插值表达式闪烁问题（网页加载慢）
<html>
<head>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<p v-cloak>{{ msg }}</p> <!-- msg为vue实例中data下面的属性 -->
</body>
</html>
2、v-text 用于代替插值表达式 ,没有闪烁问题
<body>
<h4 v-text="msg"></h4> <!-- msg为vue实例中data下面的属性 -->
</body>
3、v-html可以解析html标签， v-text和插值表达式 是原样输出并不会解析html标签
<body>
<!-- msg2为vue实例中data下面的属性 例如msg2='<h3>h3的标题</h3>'-->
`<div v-html="msg2"></div>`
</body>
4、v-bind是vue中用于绑定属性的指令，缩写形式为:（冒号）,例如：
<body>
<!-- 按钮的title值为 vue实例中data下面mytitle属性值拼接上123 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
<!-- 和上面等价
<input type="button" value="按钮" :title="mytitle + '123'">
-->
</body>
5、v-on 用于事件绑定, 缩写形式是@
<body>
<!-- 其中show是vue实例中method下面一个方法 -->
<input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show">
<!-- 和上面等价
<input type="button" value="按钮" v-bind:title="mytitle" @click="show">
-->
</body>
v-on包含一些子属性：
| 属性名 | 说明 | 使用 |
|---|---|---|
| stop | @click.stop=“function-name” | 阻止冒泡事件 |
| prevent | @click.prevent=“function-name” | 阻止默认行为，例如<a>标签默认行为是跳转，表单有submit行为 |
| self | @click.self=“function-name” | 表示只触发自己的事件 |
| once | @click.prevent.once=“function-name” | 只触发一次 |
| capture | @click.capture=“function-name” | 捕获事件 |
举例说明：
once：表示超链接默认行为只阻止一次
<a href="www.baidu.com" @click.prevent.once="function-name"></a>
capture：
默认(冒泡方式)：点击btn按钮出发的事件， 先btn click 然后在div click事件
加了capture属性：先发生div click 再触发btn click
<div id="app">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
6、v-mode 唯一个双向数据绑定,只能用于表单元素
通过修改文本框txt2的内容会同步修改文本框txt1中的内容，反之则不行
<h4>{{ msg }}</h4>
<!-- v-bind只能实现单向数据绑定 从 M 到 V -->
<input type="text" name="txt1" id="txt" v-bind:value="msg" style="width: 100%;">
<!-- v-model指令可以实现 表单元素和Model中数据 双向数据绑定 -->
<input type="text" name="txt2" id="txt" v-model="msg" style="width: 100%;">
7、v-for 就是for循环，用于迭代数组、对象、数字
<p v-for="(value, index) in list"> {{index}} --- {{value}} </p>
注意事项：
- v-for 循环的时候 key属性只能使用 number或string
- key在使用的时候 必须使用v-bind指令进行属性绑定，指定key的值
- 在组件中使用v-for循环的时候，可能会出现一些问题，因此需要指定key属性
- v-for的时候可以in 函数，例如： v-for="(value, index) in function_name()" ，但是函数必须返回return list对象
8、v-if 和 v-show
v-if：每次重新删除/创建dom操作
v-show：不会操作dom操作，只是切换display:none样式
<!-- 通过vue中变量 flag来控制元素是否显示 -->
<h1 v-if="flag">v-if控制元素</h1>
<h1 v-show="flag">v-show控制元素</h1>
9、v-if 和 v-else 逻辑控制操作
10、自定义Vue指令–directive
Vue支持用户自定义指令，通过directive实现。指令按照作用域划分为：全局指令和私有指令。
directive内部支持的属性：
| 属性名 | 说明 | 备注 |
|---|---|---|
| bind | 每当指令绑定到元素上时会执行一次function 只执行一次 | 常用 |
| inserted | 当元素插入到DOM中的时候 会执行function，可触发多次 | 常用 |
| update | 当dom 节点更新的时候 会执行，可触发多次 | |
| unbind | 解绑 |
- 全局指令
<div id="app">
<input type="text" name="txt" id="txt" v-model="mypmsg" style="width: 100%;" v-focus>
</div>
<script>
Vue.directive('focus', {
bind:function(el) {//每当指令绑定到元素上时会执行一次function 只执行一次
//el表示当前绑定元素，el是原生的DOM对象
//样式相关放到 bind中
},
inserted:function(el) {//当元素插入到DOM中的时候 会执行function，可触发多次
//行为相关的 放到 inserted中
el.focus();
},
update:function() {//当dom 节点更新的时候 会执行，可触发多次
},
unbind:function() {
}
});
var vm=new Vue({
});
</script>
- 私有指定
私有指令实际是在Vue实例对象中directives中定义相关属性
三、vue过滤器
Vue允许自定义过滤器，过滤器常用于文本格式之类，例如时间字符串格式化。按照作用域分为全局过滤器和私有过滤器
全局过滤器
<!-- 过滤器 通过 管道符号| 进行处理 -->
<p> {{ dateTimeString | formatTime }} </p>
<script>
Vue.filter('formatTime', function(now) {
var dt = new Date(now)
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getDate();
return `${year}-${month}-${day}`;//模板字符串
})
</script>
私有过滤器
在vm实例中定义filters，并且增加函数
过滤器注意事项：
- 过滤器只能用于
插值表达式和v-bind中。 - 私有过滤器优先级高于全局过滤器，即私有过滤器与全局过滤器重名，则使用私有过滤器
四、Vue的生命周期
一个Vue实例从创建到销毁整个过程会经过多个阶段，我们可以通过相应的生命周期函数(钩子函数)在实例化过程中做一些事情，例如：我们可以在created阶段调用vue实例中methods下面某些方法。Vue提供的生命周期函数有：
- 创建时期
beforeCreate() {
//vue中data methods没有被初始化
},
created() {
//vue中data、methods已经初始化
},
beforeMount() {//执行此函数时 模板已经编译好了，但尚未挂载到html页面中
},
mounted() {//mounted表示实例已经创建完毕
}
- 运行时期
//运行时期：生命周期函数
beforeUpdate() {//表示vue实例的data有更新执行，但还没有渲染页面
},
updated() {//渲染页面完成之后
}
- 销毁时期
//销毁期间
beforeDestroy() {//vue实例 从运行阶段进入销毁阶段
}
destroyed() {
}
7931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
