前端开发

Vue

自底向上

自底向上逐层应用：渐进式框架实现 方便项目增量开发

Vue实例

el：定义vue挂载的元素节点，表示vue接管该区域
data：vue中用到的数据，{{name}} 插值表达式获取数据

Vue指令

// v-text 获取data数据，会覆盖之前内容
<h2 v-text="message"></h2>
//拼接
<h2 v-text="message+'abc'"></h2>

//v-on:click @click等价，@dblclick 双击事件

//v-bind 设置属性
<img v-bind:src="imgsrc" :title="imageTitle">

// v-for
<li v-for="{item,index} in arr">
    {{index}},{{item}}
</li>

• 方法中this关键字获取data数据
• v-html 设置元素的innerHTML,解析数据的html标签
• v-show 修改display属性实现显示隐藏，true显示
• v-if 操作dom实现显示隐藏

MVVM

Model:存储数据
view：页面展示
viewModel：业务处理，对应创建的vue实例 vm

axios

var that = this // 回调函数中保存this

插值表达式页面闪烁

[v-cloak] {
display:none;
}
<div id=app v-cloak>

vue组件

• 全局组件，template只能有一个根元素
• 局部组件

vue生命周期

• beforeCreate() 组件实例化没有完成
• created(),组件实例化完成，DOM页面未生成
• beforeMoun() 模板内存中编辑完成，可以获取到data数据，还没有渲染到页面，插值表达式没有渲染
• mounte() , 模板已经完成渲染，执行完显示页面
• beforeUpdate() 内存中的数据已经更新，还没有渲染到页面。
• update() 内存中的数据已经更新，执行完显示页面。

Vue路由

1. 定义路由组件
2. 定义路由 routes，一条路由是一条route
3. 路由管理实例 router
4. 创建vue实例，router注入vue实例
5. 添加超 链接<router-link to="/home"></router-link> <router-view></router-view> 路由匹配后，渲染的地方

routes=[
{path:"/home",component:home},
]

const router = new VueRouter({routes:routes})

new Vue({router}).$mount("#app") // 相当于 el:"#app"

vue-cli 自定义配置文件

/vue.config.js/

module.exports = { devServer:{ open:true port:8889 } }

项目运行流程

• 加载main.js, render:h=>h(App)?，打包运行的入口文件
• App.vue 项目主组件，页面入口文件
• 路由配置

组件参数传递

props:{msg:String}`
props:['msg']

页面跳转

this.$router.push( )

this.$router.back()

// 获取路由参数
this.$route.params

跨域问题

No Access-Control-Allow-Origin
协议，域名，端口任何一个不同就是跨域

树形控件

defaultProps :{
    children:”children”,
    label:”label”
}
// 自定义
<... slot-scopte="{node,data}">
{{data.label}}
{{node.level}}

//对象拷贝
Object.assign(target,source)

// v-model中的数据要求是string类型，int类型要转换
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

事件冒泡

点击子元素事件，父元素有相同事件也会被触发。
@click.stop 解决事件冒泡，父元素不会接收到事件