心情不好就少听悲伤的歌,饿了就自己找吃的,怕黑就开灯,想要的就自己赚钱买,即使生活给了你百般阻挠,也没必要用矫情放大自己的不易,现实就这么残酷。改变不了的事就别太在意,留不住的人就试着放弃,受了伤的心就尽力自愈,除了生死,都是小事,别为难自己。
v-text
类似于{{ }},更改元素内textContent,好处在于防止用户网络阻塞时短暂看到{{ }}占位符。
v-html
可以解析文本内的html标签，直接生成html标签文本。如果绑定的数据内包含html内容且需要渲染到页面上，需要用v-html。
v-show
控制标签元素的display属性，控制其显示或隐藏。
v-if和v-else
相较v-show,渲染页面时v-if会删除不符合的元素，而v-show是单纯通过style控制元素display属性。v-show效率高，v-if效率低，如果只控制一个元素是否显示，用v-show，如果控制两个及以上元素显示，用v-if。
v-for
基于源数据多次渲染元素或模板块，这里的of和in是一样的。用的时候一定要加key。key应该是数组中不重复的值，否则会导致数据出错。
<ul>
<li v-for="n of name">{{n}}</li>
</ul>
<script>
var vm = new Vue({
el:'#app',
data:{
name:['aa','bb','cc']
},
methods:{
}
})
</script><ul>
<li v-for="(n,i) in name">{{i+1}} => {{n}}</li>
</ul>
<script>
var vm = new Vue({
el:'#app',
data:{
name:['aa','bb','cc']
},
methods:{
}
})
</script><li v-for="(n,i) in name" :key="i">{{i}} => {{n}}</li>v-on
<div id="pop" v-on:click="say()"></div>
可以简写成
<div id="pop" @click="say></div>v-once
只渲染一次，用于优化性能。
v-cloak
要配合css的[v-cloak]{display: none;}使用，在网络不顺畅时可以避免元素短暂显示。
<div id="app">
<h1 v-cloak>{{uname}}</h1>
<h1 v-text="`用户名:${uname}`"></h1>
</div>
<script>
setTimeout(function (){
var vm = new Vue({
el:'#app',
data:{
uname:"okokokok"
},
methods:{
}
})
},2000)
</script>v-bind
用于绑定属性。如果元素内容可能会变化，则用{{}}绑定，如果是元素属性发生变化，用：或者v-bind绑定。绑定属性的时候，该方式是单向绑定，即从data到页面中，不能从页面到data。
<div id="app">
<img :src="pm25">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
pm25:'img/src.jpg'
},
methods:{
}
})v-model
双向绑定。代替v-bind，数据实时更新。
v-pre
如果内容中想显示双花括号如{{}}，如使用该指令，则不会编译{{}}的内容。
组件系统
先创建组件，再自动生成组件。生成的前提是要求模板有唯一的父元素。组件内没有el，el替换成template，template用反引号 引起来。组件内的data必须要是函数的返回，即return，不能是平时的data对象。模板的名字不要用驼峰命名法。
<script>
Vue.component("my-counter",{
template:`<div><button @click="minus">-</button><span>{{n}}</span><button @click="add">+</button></div>`,
data(){return{n:1}},
methods:{
minus(){this.n--;this.n==0&&(this.n=1)},
add(){this.n++}}})
</script>
</head>
<body>
<div id="app">
<ul>
<li><my-counter></my-counter></li>
<li><my-counter></my-counter></li>
<li><my-counter></my-counter></li>
</ul>
</div>
<script>
var vm = new Vue({el:'#app',})
</script>全局组件、局部组件
局部组件一定要注意创建顺序，先写子组件再写父组件。局部组件用components引入子组件。
<head>
<script>
var todoAdd = {
template: `<div><input type="text"><button>+</button></div>`
}
var todoItem = {
template: `<li>1 - 吃饭<a href="javascript:;">删除</a></li>`
}
var todoList = {
template: `<ul>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ul>`,
components: {todoItem}
}
Vue.component('todo', {
template: `<div><h1>todo</h1>
<todo-add></todo-add><todo-list></todo-list>
</div>`,
components: {todoAdd, todoList}
});
</script>
</head>
<body>
<div id="app">
<todo></todo>
</div>
<script>
new Vue({el: '#app',})
</script>组件生命周期
四个阶段：create/mount/update/destroy，即创建，挂载，更新，销毁
<script>
new Vue({
el: '#app',
data: {
count: 0
},
beforeCreate() {
console.log('创建组件前触发')
},
created() {
console.log('创建组件后触发')
},
beforeMount() {
console.log('挂载组件前触发')
},
mounted(){
console.log('挂载组件后触发')
},
beforeUpdate(){
console.log('更新组件data中的变量之前自动触发')
},
updated(){
console.log('更新变量后自动触发')
},
beforeDestroy(){
console.log('销毁当前组件之前自动触发')
},
destroyed(){
console.log('销毁当前组件后触发')
}
}
)
</script>自定义指令
过滤器
如果值需要加工之后再显示，需要用过滤器，过滤器需要传参，需要return 返回处理后的值。
<head>
<script>
Vue.filter('moneyFilter',function (oldVal){return `¥${oldVal.toFixed(2)}`})
</script>
</head>
<body>
<div id="app">
<h1>价格:{{price | moneyFilter}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {price: 12.5}})
</script>
</body>
<head>
<script>
Vue.filter('moneyFilter',function (oldVal,type){
return `${type||'¥'}${oldVal.toFixed(2)}`
})
</script>
</head>
<body>
<div id="app">
<h1>价格:{{price1 | moneyFilter}}</h1>
<h1>价格:{{price2 | moneyFilter('$')}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {price1: 12.5,price2:22}})
</script>
</body>组件属性
计算属性
watch属性
父子组件通信
子组件需要用父组件的数据，形成嵌套关系。
父用props给子通信，子组件用props声明期望从父组件获取的数据。特别要注意在父组件内标签上用bind语法与父组件建立通信渠道。
<head>
<script>
var todoAdd = {
template: `<div><input type="text"><button>+</button></div>`
}
var todoItem = {
template: `<li>{{ k+1 }} - {{ t }}<a href="javascript:;" @click="del">删除</a></li>`,
props:['t','k','tasks'],
methods:{
del(){
this.tasks.splice(this.k,1)
}
}
}
var todoList = {
template: `<ul>
<todo-item v-for="(t,k) in tasks" :key="k" :t="t" :k="k" :tasks="tasks"></todo-item>
</ul>`,
props:['tasks'],
components: {todoItem}
}
Vue.component('todo', {
template: `<div><h1>todo</h1>
<todo-add></todo-add><todo-list :tasks="tasks"></todo-list>
</div>`,
data(){return{tasks:['吃饭','吃饭饭','吃饭饭饭']}},
components: {todoAdd, todoList}
});
</script>
</head>
<body>
<div id="app">
<todo></todo>
</div>
<script>
new Vue({el: '#app',})
</script>
</body>子组件如果要调用父组件函数，需要用$emit()触发父组件函数。
<head>
<script>
var todoAdd = {
template: `<div><input v-model="task" type="text"><button @click="add">+</button></div>`,
data(){return{task:''}},
methods:{
add(){
this.$emit('add',this.task)
this.task=''
}
}
}
Vue.component('todo', {
template: `<div><h1>todo</h1>
<todo-add @add="add"></todo-add></div>`,
data(){return{tasks:['吃饭','吃饭饭','吃饭饭饭']}},
components: {todoAdd, todoList},
methods:{add(task){
this.tasks.push(task)
}}
});
</script>
</head>
<body>
<div id="app">
<todo></todo>
</div>
<script>
new Vue({el: '#app',})
</script>
</body>打通父子通信！！！
父调子：
this.$refs.引用.函数名
子调父：
this.$parent.函数名
父组件要在模板中加ref=''.
兄弟通信
路由
- 指定路由容器
- 创建各个组件
配置路由
<router-link to="/details">详情</router-link>var router = new VueRouter({ routes:[ {path:'/',component:Index}, {path: '/details',component: Details}, ] })路由传参
.vue文件内固定格式
<template> </template> <script> export default { } </script> <style scope> </style>
作者： 猪皮怪