- data(存全局变量) 与 直接嵌入JS代码
<template>
<div>
<div> data:{{msg}}</div>
<div> {{num + 1}}</div>
<div v-html="raw"></div>
<div v-bind:class="color"></div>
<div v-on:click="say('hi')">点击</div>
<div @click="change()">修改颜色</div>
<div>{{msg | capitalize}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'Hello World',
num:2,
raw:'<span>div的子标签</span>',
color:'red',
}
},
methods: {
change(){
this.color = 'blue';
},
say(h){
alert(h);
},
},
filters: {
capitalize(){
return '123';
}
}
}
</script>
- data()是函数 methods和filters是对象
- data中放全局变量 注意:是放在return中
- v-html 添加子标签 用 =
- v-on: 的简写为 @
- {{msg | capitalize}}为过滤器
- 计算属性computed(简化模板)
<template>
<div>
<div>{{msg.split('').reverse().join('')}}</div>
<div>{{re}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'Hello World',
}
},
computed: {
re(){
return this.msg.split('').reverse().join('');
}
}
}
</script>
- v-bind(css与style绑定) 三种
<template>
<div>
<div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>
<div :class="classObject"></div>
<div :class="[activeClass, errorClass]"></div>
<div :style="{'color': activeColor}"></div>
<div :style="styleObject"></div>
<div :style="[baseStyle, newStyle]"></div>
</div>
</template>
<script>
export default{
data(){
return{
isActive:true,
hasError:false,
classObject: {
'active':true,
'text-danger':false
},
activeClass:'active',
errorClass:'text-danger',
activeColor:'black',
fontSize:30,
styleObject: {
color:'red',
fontSize:'40px'
},
baseStyle: {
color:'red'
},
newStyle: {
fontSize:'40px'
}
}
}
}
</script>
- 条件渲染 v-if
<template>
<div>
<div v-if="bool">yes</div>
<div>==========================</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
<div>==========================</div>
<div v-show="isShow">123</div>
</div>
</template>
<script>
export default{
data(){
return{
bool:true,
type:'C',
isShow:true
}
}
}
</script>
- 列表渲染
<template>
<div>
<ul id="example">
<li v-for="item in items">{{item.msg}}</li>
<li v-for="mi in mis">{{mi}}</li>
<li v-for="(mi,index) in mis">{{index}} - {{mi}}</li>
<li v-for="(value,key) in obj">{{key}} : {{value}}</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
items:[
{msg:'foo'},
{msg:'bar'}
],
mis:[
'qwq',
'cdc'
],
obj: {
num1:'11',
num2:'22'
}
}
}
}
</script>
- 事件处理器
<template>
<div>
<button @click="counter += 1">增加一</button>
<p>{{counter}}</p>
<button @click="greet('I am greet')">点击</button>
<!-- stop阻止往上冒泡 -->
<div @click="dothis2()">
<button @click.stop="dothis()">
dothis
</button>
</div>
</div>
</template>
<script>
export default{
data(){
return{
counter:0
}
},
methods: {
greet(h){
alert(h)
},
dothis2(){
alert('dothis2')
},
dothis(){
alert('dothis')
},
}
}
</script>
- DOM操作
<template>
<div>
<div ref="head"></div>
</div>
</template>
<script>
export default{
data(){
return{
counter:0
}
},
mounted(){
this.$refs.head.innerHTML = 'helloworld';
}
}
</script>
- 过渡效果
<template>
<div>
<div id="demo">
<button @click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default{
data(){
return{
show:true
}
},
}
</script>
<style>
.fade-leave .fade-enter-to{opacity:1}
.fade-leave-active .fade-enter-active{transition: opacity 10s}
.fade-leave-to .fade-enter{opacity:0}
</style>
- 路由
<template>
<div>
<router-link to="/demo"></router-link>
<router-link :to="{name:'demo', params:{userId:456}}"></router-link>
<router-link :to="{path:'/demo', params:{userId:456},
query:{plan:'private'}}"> </router-link>
<button @click="toURL()"></button>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods: {
toURL(){
this.$router.push({path:'/demo', params:{userId:456},
query:{plan:'private'}})
}
}
}
</script>
alert(this.$route.params.userId)
- 接收页面传来的参数
- 状态管理vuex(全局状态管理,所有页面共享数据)
- 首先安装vuex
npm install vuex
- 在src目录下新建
src/store/index.js
- main.js中引入store
import store from './store'
,并在new Vue中加入store - 在新的页面中就可以使用全局数据了
<template>
<div>
<div>{{msg}}</div>
<button @click="change()">点击</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'123',
}
},
methods: {
change(){
this.msg = this.$store.state.count;
this.$store.dispatch('inc',100);
this.msg=this.$store.state.num;
}
}
}
</script>