济南建站培训,国土局网站建设方案,全网seo,成都创新互联网站建设一. 关于局部组件组成的三个部分#xff08;template, script, style#xff09; template 组件的模板结构 #xff08;必选#xff09;
每个组件对应的模板结构#xff0c;需要定义到template节点中
template!-- 当前组件的dom结构#xff0c;需…一. 关于局部组件组成的三个部分template, script, style template 组件的模板结构 必选
每个组件对应的模板结构需要定义到template节点中
template!-- 当前组件的dom结构需要定义到template结构的内部 --
/template
template中使用的指令
template!-- 【1.内容渲染指令】 --span v-textmsg/spanspan{{msg}}/spandiv v-htmlhtml/div!-- 【2.属性绑定指令】 --img v-bind:srcimageSrc!-- 【3.双向指令绑定指令】 --select v-model/select!-- 【4.循环渲染指令】 --div v-for(item, index) in items/div!-- 【5.条件渲染】 --div v-ifMath.random() 0.5Now you see me/divdiv v-else-iftype B/divdiv v-elseNow you dont/div
/template
template定义根节点
注vue 2.x版本中template节点内dom结构仅支持单个根节点但在vue 3.x版本中支持多个根节点 script 组件的javascript行为 可选
script中的data节点可以定义当前组件渲染期间需要用到的数据对象data是一个函数script中的methods节点可以定义组件中的事件处理函数 style 组件的样式 可选
style的lang属性支持可选值csslesssassscss当使用less或sass时要先安装less或sass依赖再设置lang的属性值为less或sassscss是sass3.0引入的语法可以理解scss是sass的一个升级版本弥补sass和css之间的鸿沟合理使用scoped因为使用scoped可以让样式只对当前组件生效 二. 关于生命周期
beforeCreatecreatedbeforeMountedmountedbeforeUpdateupdatedbeforeDestorydestoryed
created和mounted的区别created在模板渲染成html前调用mounted在模板渲染成html后调用 三. 关于父子组件的传值
封装出来的通用组件叫子组件引用通用组件的界面叫做父组件组件的封装必须高性能低耦合
1. 父组件向子组件传参用props
!-- 父组件 --
templateChild :articleListarticleList/Child
/template!-- 子组件 --
templatedivulli v-for(value,index) in articleList :keyindex{{value}}/li/ul/div
/templatescriptexport default {name: Child,props: {articleList: {type: array,default: function () {return []} }},//接收父组件传来的数据articleList}
/script
2. 子组件向父组件传参用emit
!-- 父组件 --
templatecommon-dialog pushIdgetId/common-dialog
/template
scriptmethods: {getId (id) {}}
/script!-- 子组件 --
templatedivinput typebutton clickemitIndex(id) value向父组件发送数据/div
/template
scriptexport default {methods: {emitIndex (id) {this.$emit(pushId, id)}}}
/script 四. 关于computed与watch
1. computed与watch的区别
computed是计算属性watch是监听监听data中的数据变化computed支持缓存即当其依赖的属性值发生变化时计算属性会重新计算反之则使用缓存中的属性值watch不支持缓存当对应属性发生变化的时候响应执行computed不支持异步有异步操作时无法监听数据变化watch支持异步
2. computed与watch的使用场景
computed的使用
templatediv{{ changewords }}/div
/template
scriptexport default {data () {myname: aBcDEf},computed: {changewords(){return this.myname.substring(0,1).toUpperCase()}} }
/script
watch的使用
templatedivpFullName: {{fullName}}/ppFirstName: input typetext v-modelfirstName/p/div
/template
scriptexport default{data () {firstName: Dawei,lastName: Lou,fullName: },watch: {firstName(newName, oldName) {this.fullName newName this.lastName;}// firstName: {// handler(newName, oldName) {// this.fullName newName this.lastName;// },// immediate: true// }}}
/script 五. 关于mixin
局部混入中mixin的文件就是一个对象这个对象可以包含vue组件的一些常见的配置包括datamethods生命周期的钩子函数等等。
不同组件中的mixin是相互独立的。 mixin的使用
!-- 引用mixins的文件 --
scriptimport queryList from /common/mixin/queryList;export default{mixins: [queryList]}
/script!-- mixins的文件 --
export const mixins {data() {return {};},computed: {},created() {},mounted() {},methods: {},
}; 六. 关于slot的使用
!-- 子组件使用插槽slot Link.vue--
templatea :hrefhref relexternal nofollow classlink!-- 留个插槽外界传入内容放置在这里 --slot/slot/a
/template!-- 父组件调用子组件 --
templatediv classappLink hrefhttps://baidu.com relexternal nofollow 百度/LinkLink hrefhttps://google.com relexternal nofollow stylemargin-top: 10px!-- 这里允许放置任意的内容包括字符串和标签 --spanIcon/span谷歌/Link/Link/div
/template 七. 关于vuex
vuex的五个组成部分statemulationsactiongettersmodules
state定义了应用程序的状态即要管理的数据
const store new Vuex.Store({state: {count: 0}
})
getters用于获取state中的状态类似vue组件中的计算属性
const store new Vuex.Store({state: {count: 0},getters: {doubleCount(state) {return state.count * 2}}
})
mulations修改state的数据
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count},add(state, payload) {state.count payload}}
})
action用于异步操作和提交mulations在actions中可以进行任何异步操作最后再提交到mulations中同步修改state
const store new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count}},actions: {incrementAsync(context) {setTimeout(() {context.commit(increment)}, 1000)}}
})
modules用于将store分割成模块每个模块都拥有自己的state, getters, mulations, action和子模块以便提高应用程序的可维护性
const store new Vuex.Store({modules: {cart: {state: {items: []},mutations: {addItem(state, item) {state.items.push(item)}},actions: {addAsyncItem(context, item) {setTimeout(() {context.commit(addItem, item)}, 1000)}}}}
})
