Vue基本用法：过滤器、生命周期钩子函数和利用webpack 生成项目
过滤器
过滤器分为局部过滤器和全局过滤器。局部过滤器只能在当前组件使用，全局过滤器能在任意地方使用
局部过滤器示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<App />
</div>
</body>
<script src="./vue.js"></script>
<script>
// 局部过滤器只能在当前组件内使用
let App = {
data(){
return {
"msg": "Hello World"
}
},
template:`
<div>我是App组件。过滤器后的数据：{{ msg | myReverse }} </div>
`,
// filters 中注册过滤器
filters:{
// 在组件内部注册过滤器，局部过滤器；
/*
声明过滤器的语法如下：
'过滤器的名字': function(val){}
使用过滤器的语法如下：利用 管道符 |
要进行过滤的val | '过滤器的名字'
*/
myReverse: function (val) {
console.log(val);
return val.split('').reverse().join('')
}
}
}
new Vue({
el: "#app",
data(){
return {
}
},
components:{
App
}
})
</script>
</html>
浏览器效果示例：
带参数的过滤器：
示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<App />
</div>
</body>
<script src="./vue.js"></script>
<!-- 引入 moment.js 这个插件 -->
<script src="./moment.js"></script>
<script>
let App = {
data(){
return {
ctm: new Date()
}
},
// 带参数的过滤器
template:`
<div>时间: {{ ctm | myTime('YYYY-MM-DD') }} </div>
`,
// filters 中注册过滤器
filters:{
myTime: function (val, formatStr) {
return moment(val).format(formatStr)
}
}
}
new Vue({
el: "#app",
data(){
return {
}
},
components:{
App
}
})
</script>
</html>
浏览器效果示例：
全局过滤器的声明语法：
Vue.filter('过滤器的名字', function(参数){})// 全局过滤器的使用方法和局部过滤器是一样的
示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<App />
</div>
</body>
<script src="./vue.js"></script>
<!-- 引入 moment.js 这个插件 -->
<script src="./moment.js"></script>
<script>
// 全局过滤器
Vue.filter('myTime', function (val, formatStr) {
return moment(val).format(formatStr)
})
let App = {
data(){
return {
ctm: new Date()
}
},
// 带参数的过滤器
template:`
<div>时间: {{ ctm | myTime('YYYY-MM-DD') }} </div>
`,
}
new Vue({
el: "#app",
data(){
return {
}
},
components:{
App
}
})
</script>
</html>
生命周期钩子函数：
部分钩子函数如下所求：
beforeCreatecreated
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
keep-alive组件：
keep-alive 组件是Vue提供的内置组件，主要作用是把组件缓存起来，并保存组件原先的状态
示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<App />
</div>
</body>
<script src="./vue.js"></script>
<script>
let Test = {
data(){
return {
msg: "NEOOOOOO"
}
},
template:`
<div id='test'>
我是Test 组件
<h2>{{ msg }}</h2>
<button @click='change'>更新数据</button>
</div>
`,
methods:{
change(){
this.msg = "neo呀"
}
},
// 钩子函数
beforeCreate(){
// 组件创建之前
console.log('组件创建之前：',this); // VueComponent
console.log('组件创建之前：',this.msg); // undefined
},
created(){
// 组件创建之后（此时 DOM 还没有渲染，即 created的执行发生在DOM渲染之前）； 可以在这个方法中发送 ajax，即通过 ajax 获取到数据，然后再渲染 DOM
console.log('组件创建之后：',this); // VueComponent
console.log('组件创建之后：',this.msg); // NEOOOOOO
// ***** 最重要的一个钩子函数 ******
},
// created方法执行之后， Test 组件还没有被渲染到 App组件中 ，App组件也还没被渲染到实例中，即还没有挂载进去
// mounted：挂载， 把组件中所有template 模板渲染到模板上（DOM渲染）
beforeMount(){
// 装载数据到 DOM之前调用
console.log("挂载之前：", document.getElementById('app'));
/*
<div >
<app></app>
</div>
*/
},
mounted(){
// 装载数据到DOM之后调用， 可以获取到真实存在的DOM元素， Vue 操作以后的 DOM
// 这个地方可以操作DOM
console.log("挂载之后：", document.getElementById('app'));
/*
<div >
<div>
<div >
我是Test 组件
<h2>NEOOOOOO</h2>
<button>更新数据</button>
</div>
</div>
</div>
*/
// mounted 也是一个比较重要的方法
},
beforeUpdate(){
// 在更新数据之前调用此钩子；应用：获取原始的DOM
console.log(document.getElementById('app').innerHTML);
/*
<div>
<div >
我是Test 组件
<h2>NEOOOOOO</h2>
<button>更新数据</button>
</div>
</div>
*/
},
updated(){
// 在更新数据之后调用此钩子；应用：获取最新的DOM
console.log(document.getElementById('app').innerHTML);
/*
<div>
<div >
我是Test 组件
<h2>neo呀</h2>
<button>更新数据</button>
</div>
</div>
*/
},
beforeDestroy(){
// 组件销毁之前 （例如用v-if， 不能用v-show，v-if 才是真正的销毁）
console.log('beforeDestory');
},
destroyed(){
// 组件销毁之后
console.log('destroy');
// 定时器的销毁要在此方法中进行 （如果开了定时器，一定记得要销毁定时器）
},
// 销毁、创建DOM很消耗性能
// activated 和 deactivated 需要借助 vue 的内置组件 keep-alive；
// keep-alive 的作用： 能让当前组件缓存起来，并保存组件原来的状态；如 把 把 Test 组件放到 <keep-alive></keep-alive> 中
activated(){
// 激活
console.log('组件被激活了');
},
deactivated(){
// 停用
console.log('组件被停用了');
}
}
let App = {
data(){
return {
isShow: true
}
},
// Test组件放在 keep-alive 中就会被缓存起来
template:`
<div>
<keep-alive>
<Test v-if="isShow" />
</keep-alive>
<button @click="clickHandler">添加移除Test组件</button>
</div>
`,
methods:{
clickHandler(){
this.isShow = !this.isShow;
}
},
components:{
Test
}
}
new Vue({
el: '#app',
data(){
return {
}
},
components:{
App
}
})
</script>
</html>
钩子函数官方文档：
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
利用webpack 生成项目：
1、生成项目
vue init webpack 项目名
2、安装依赖
npm install
3、安装项目依赖包，如 element-ui。 先 cd 到项目，再执行下面的命令：
npm i element-ui -S
4、 运行项目。先 cd 到项目，再执行下面的命令：
npm start
或
npm run dev
webpack 文档：
https://webpack.docschina.org/concepts/
以上是 Vue基本用法：过滤器、生命周期钩子函数和利用webpack 生成项目 的全部内容， 来源链接： utcz.com/z/375922.html
