前言
Vue基础模板语法:数据渲染、路由
博客地址:芒果橙的个人博客 【http://mangocheng.com】
一、模板语法
1. 数据渲染
- 获取对象数据
// html
<div id="app"> {{ message }} </div>
// js
var app = new Vue({
el : '#app' , //将DOM元素进行绑定
data : { //定义数据对象、信息
message : 'Hello Vue'
}
});
- 绑定DOM元素特性:v-bind,可以简写
<span v-bind:title="message"> 鼠标悬停 </span>
<span :title="message"> 鼠标悬停 </span>
- 条件和循环
<div> <p v-if="seen" > 看到了 </p> </div>
<div> <ol> <li v-for="temp in arr">{{ temp.content }} </li> </ol> </div>
- 事件绑定:v-on ,可以简写为@
<button @click="remove">移除</button>
// 方法
methods:{
remove:function(){ ... }
}
- 表单双向绑定:v-model(Vue实例中的data与渲染在DOM表单元素【input/textarea/select】上的内容保持一致)
<el-input v-model="form.title"></el-input>
// data
form:{
title:''
}
- 如果数据赋值,但视图未刷新,可使用$set方法
this.$set(this.obj,'newVar',"这是属性值");
2.条件渲染:v-if/v-else-if
<div v-if="type=='A'"> a</div>
<div v-else-if="type=='B'">b</div>
<div v-else>c</div>
3.列表渲染:v-for
<div v-for="(value,key,index) in object">{{ index}},{{key}}:{{value}}</div>
<!-- v-for 和 v-if的结合使用,v-for的优先级高于v-if -->
<li v-for="todo in todos" v-if="!todo.isCompleted"> {{ todo }} </li>
4.事件处理:v-on
<el-tag v-for="item in tags" v-if="tags" class="tag-area_one" closable @close="removeTag(item)">{{item}}</el-tag>
二、入门知识点
- router文件夹下index.js配置的是路由访问地址
- 需要使用到其他组件时,可通过import方式引入
- export和export default区别
-
export不限变量数;export default只输出一次
-
export输出的变量需要使用{ }盛放;export default不需要
-
一个js文件可以有多个export,有且只能有一个export default
- slot插槽
- 插槽是一块模板,对于任何一个组件,模板种类分为非插槽模板和插槽模板。
- 非插槽模板:指html模板,如’div/span/ul/table’这些,它们的显示与隐藏以及怎样显示由插件自身控制。
- 插槽模板:是slot,它是一个空壳子,显示与隐藏以及最后使用什么样的HTML模板显示由父组件控制,但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板就显示在哪块。
- 一个template下就只能有一个根节点<template><div></div></template>
- 父子组件相互传值
- 父组件向子组件传值:父页面里,在子组件里定义了一个参数名,子组件里需要定义接收的参数
<!-- 父组件里 -->
<children-componment fatherVar='this is value'></children-componment>
<!-- 子组件里 Vue文件 -->
props:['fatherVar']
-
子组件向父组件传值:子组件里添加父组件方法的定义回调
- 子组件使用$emit(“methodName”,params)触发父组件的自定义事件 (“handleClose”, false) -->
<send-back-dialog :showDialog="showSendBackDialog" @handleClose="handleCloseSendBackDialog" @refresh="reload" ></send-back-dialog> this.$emit("refresh"); <!-- reload是父组件方法名称 --> this.$emit(event:string,...args:any[]); <!-- 可以传递多个参数 -->
- 在子组件定义的对象,默认值是()=>{}
props: { paramObj: { type: Object, default: ()=>({}) } }
- 对象中添加原型方法,则直接在created上定义
Array.prototype.indexOf = function(val){
for(var i=0;i<this.length;i++){
if(this[i] == val) return i;
}
return -1;
}
Array.prototype.remove = function(val){
var index = this.indexOf(val);
if(index>-1){
this.splice(index,1);
}
}
- 刷新页面,重新获取数据:通过路由的显示隐藏
<!-- App.vue -->
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide (){
return {
reload:this.reload
}
},
data(){
return {
isRouterAlive:true
}
},
methods:{
reload (){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive = true
})
}
},
components:{
}
}
</script>
<!-- 子页面 -->
<script>
export default {
inject:['reload'],
methods:{
clear(){
this.reload()
}
}
</script>
来源博客:https://blog.csdn.net/yufengaotian/article/details/81238792
三、相关知识点
1.子组件获取父组件值
- 在父页面的子组件定义变量后,直接在子页面使用this.$parent.var 即可获取
- 在父页面的子组件的prop定义变量,子组件直接使用this.var 即可获取
2.watch-监听器
watch: {
"groupData.qtmc":function(){ } //【对象的属性,需要加""】 对象-- data:function(){
deep:true, // 深度监听
handler(newVal,oldVal){} // 数值改变回调事件
}
}
3.删除对象属性
Vue.detele(this.object,"propertyName");
4.路由:route
-
route是VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如histort对象;经常用的跳转链接可以用this. r o u t e r . p u s h 和 r o u t e r − l i n k 跳转一样; t h i s . router.push 和 router-link跳转一样;this. router.push和router−link跳转一样;this.router.push会往history栈中添加一个新的记录
-
route 相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query等
-
嵌套路由:父级的路由要 + <router-view> ; 通过命名路由,可在同级显示多个子级路由
-
跳转方式
- 路由组件 router-link
- push方法:this.$router.push({ path: ‘/home/first’ })
四、全局引入(main.js)
- jquery
import jquery from 'jquery'
window.jquery = window.$ = jquery
五、其他
1. 问题汇总
- 报警告,直接修改了组件里的属性
点击传送 - 数据渲染无效
- 赋值时,执行顺序可能不一定符合从上到下。此时使用定时器setTimeout
- Vue中有些组件拿不到,要考虑是否是还未加载的原因