找合伙人做网站,怎么做网站盈利,灯笼怎么做手工制作视频,沧州网络科技有限公司vue基础学习 Vue基础指令v-show 和 v-ifv-on指令v-bind指令v-bind操作classv-bind 操作stylev-for 指令练习#xff1a;图书管理案例v-modelv-model原理 指令修饰符v-model指令修饰符click.stop-》阻止冒泡按键修饰符阻止默认行为 计算属性计算属性简写computed计算属性VS方法… vue基础学习 Vue基础指令v-show 和 v-ifv-on指令v-bind指令v-bind操作classv-bind 操作stylev-for 指令练习图书管理案例v-modelv-model原理 指令修饰符v-model指令修饰符click.stop-》阻止冒泡按键修饰符阻止默认行为 计算属性计算属性简写computed计算属性VS方法methods计算属性完整写法 watch 侦听器监视器)watch 侦听器简写watch 侦听器完整写法 Vue生命周期Vue生命周期钩子函数 Vue-cli使用步骤项目目录介绍项目支持Less普通组件的注册局部注册全局注册 组件的样式冲突 scopeddata是一个函数组件通信父-子通信子 - 父通信什么是prop EventBus非父子通信(了解)res 和 refsVue异步更新和$nextTickslot插槽ViewRouter查询参数传参动态路由传参 首页重定向和404点击按钮跳转 Vuex Vue基础指令
v-show 和 v-if 应用场景 这里的请登录注册对于已经登录的用户是不需要展示的而购物车当鼠标移入的时候会显示鼠标移出隐藏…
v-on指令
以下演示了如何定义方法如何获取data中的变量 以下演示函数传参
v-bind指令
作用动态设置html标签属性-src、title、url可使用简写:src、:url 练习
v-bind操作class v-bind 操作style
适应场景某个具体属性的动态设置
v-for 指令练习图书管理案例 v-model
作用给表单元素使用双向数据绑定可以快速获取或设置表单元素内容
v-model原理 指令修饰符 v-model指令修饰符 click.stop-》阻止冒泡 按键修饰符 阻止默认行为 计算属性
计算属性简写
基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算。
computed计算属性VS方法methods 计算属性完整写法
计算属性默认的简写只能读取访问不能修改。如果要修改→需要写计算属性的完整写法。
watch 侦听器监视器)
watch 侦听器简写
作用监视数据变化执行一些 业务逻辑 或 异步操作
watch 侦听器完整写法
完整写法添加额外配置项 (1) deep: true 对复杂类型深度监视 (2) immediate: true 初始化立刻执行一次handler方法 具体查看视频https://www.bilibili.com/video/BV1HV4y1a7n4?p33spm_id_frompageDrivervd_sourcec3fc4867486b99c0b85501121f575279
Vue生命周期
Vue生命周期钩子函数
Vue生命周期一个Vue实例从 创建到销毁的整个过程生命周期四个阶段: 创建挂载更新销毁 Vue生命周期过程中会自动运行一些函数被称为[生命周期钩子]让开发者可以在[特定阶段] 运行自己的代码
Vue-cli
使用步骤
1.全局安装(一次): yarn global add vue/cli 或 npm i vue/cli -g 2.查看 Vue 版本:vue --version 3.创建项目架子:vue create project-name (项目名-不能用中文) 4.启动项目: yarn serve 或 npm run serve (找package.json)
项目目录介绍 项目支持Less
如下图要想在代码中写less样式得安装相关依赖
给style加上 langless安装依赖 yarn add less less-loader -D
普通组件的注册
局部注册
局部注册只能在注册的组件内部使用
创建vue组件(比如在components目录下)在使用的组件内导入并注册
templatediv classappMyHeader/MyHeaderMyMain/MyMainMyFoot/MyFoot/div
/templatescript
import MyHeader from ./components/MyHeader.vue
import MyMain from ./components/MyMain.vue
import MyFoot from ./components/MyFoot.vue
export default {components: { // 局部注册MyHeader: MyHeader,MyMain: MyMain,MyFoot: MyFoot}
}
/script
style langless
.app {width: 600px;height: 600px;background-color: #87ceeb;
}
/styletemplatediv classheader我是头头/div
/template
script
export default {}
/scriptstyle
.header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: pink;
}
/style其它两个组件就不粘贴了一样的写法… 全局注册
创建vue组件(比如在components目录下)main.js进行全局注册 比如说上面那个例子header-main-footer结构我想在三层结构里都加个button就可以把button定义全局组件使用的时候
import Vue from vue
import App from ./App.vue
// 引入
import MyButton from ./components/MyButtonVue.config.productionTip false// 进行全局注册在所有的组件范围内都可以用
Vue.component(MyButton, MyButton) // (组件名组件对象)new Vue({render: h h(App),
}).$mount(#app)在其它组件中直接使用就行了也无须import引入后续button有变化只需要改全局组件即可
组件的样式冲突 scoped data是一个函数
一个组件的 data 选项必须是一个函数。 保证每个组件实例都有独立的一份数据对象
组件通信
组件通信就是指 组件与组件 之间的数据传递
组件的数据是独立的无法直接访问其他组件的数据。想用其他组件的数据-组件通信 组件关系分类: 父子关系 、非父子关系
父-子通信 代码如下
templatediv styleborder:3px solid #000; margin:10px我是父组件Son :titlemyTitle/Son/div
/templatescript
import Son from ./components/Son.vue
export default {components: {Son: Son},data() {return {myTitle: 你好呀我是}}
}
/script
style
/styletemplatediv styleborder:3px solid #000; margin:10px我是Son组件{{title}}/div/templatescript
export default {// 通过 props 接收props: [title]
}
/scriptstyle scope
/style子 - 父通信 什么是prop 相关视频https://www.bilibili.com/video/BV1HV4y1a7n4?p51spm_id_frompageDrivervd_sourcec3fc4867486b99c0b85501121f575279
EventBus非父子通信(了解) EventBus.js
import Vue from vue
const Bus new Vue()
export default Busres 和 refs Vue异步更新和$nextTick slot插槽
适应场景组件结构一样内容不一样 插槽视频https://www.bilibili.com/video/BV1HV4y1a7n4?p66spm_id_frompageDrivervd_sourcec3fc4867486b99c0b85501121f575279
ViewRouter
视频地址https://www.bilibili.com/video/BV1HV4y1a7n4?p73spm_id_frompageDrivervd_sourcec3fc4867486b99c0b85501121f575279
查询参数传参 动态路由传参 首页重定向和404 点击按钮跳转 如果跳转的时候传参呢 总结
Vuex store定义 修改state中的数据 调用mutation传参如果有多个包装成json对象即可
