vue

Vue.js核心概念与实战

最新推荐文章于 2025-09-12 17:31:31 发布

weixin_30675967

最新推荐文章于 2025-09-12 17:31:31 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签：数据结构与算法 javascript ViewUI

原文链接：http://www.cnblogs.com/zhangxiaan/p/10167718.html

本文深入解析Vue.js的关键特性，包括穿梭框组件的使用、指令详解、路由配置及生命周期钩子的区别。从穿梭框的环境搭建到指令的灵活运用，再到路由的高级配置和页面生命周期的理解，全面覆盖Vue.js的开发要点。

一、穿梭框的使用：

1.环境，需要安装 npm i element-ui -S

2在项目的app.js中加入

import Vue from 'vue';

import ElementUI from 'element-ui';

Vue.use(ElementUI);


在组建中即可使用：如下

<script>

import treeTransfer from 'el-tree-transfer'
1.在data（）{return{

mode: "transfer", // 有两种穿梭框 transfer(tree) addressList

} }

2.components中加入

components: {
    treeTransfer //注册组件
},

3.剩下的就是数据结构，遍历获取key ，label，调用fromData即可实现穿梭

that.fromData.push({

　　key: item.id,
　　label: item.name
}）；

</script>
效果图：

二、指令
v- 前缀指令： 指令是vue模仿angular的一种实现方式
  1.v-bind指令： 通过指令和表达式的方式操作界面（通过开关toggle为true或者flase控制样式是否生效）

　　　　<style> .style{color: red}</style>

　　　　　　<div v-bind: class="{'style:toggle'}">通过开关控制样式是否生效</div>

　　　　new Vue({

　　　　el: '#app',

　　　　 data: {

　　　　 toggle: true

　　　　 }

　　　　</script>

　　2.v-if指令，条件渲染

　　　　<div v-if="message">通过message 的结果为true或者为flase来控制是否展示此句</div>

　　3.v-for指令，列表渲染

　　 4.v-model指令，用来实现双向数据绑定，主要用于用户输入的input标签

　　　　<input id="name" v-model="user.name" ></input> 输入数据绑定到user中

　　5.v-on指令用来绑定事件

　　　　<button v-on:click="onClick">按钮绑定事件</button>

　　　　在methods 中执行onClick方法

　　　　 v-on由于经常使用，也可以简写为“@” 即 v-on:click="onClick" ---》@click=“conClick”

三、路由

router、routes、route的区别：

1.router：一般指的是路由实例。如：路由编程式导航的$router.push()

2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象

3.route：指路由对象。如：this.$route指的就是当前路由对象

路由的使用：

　　<h1>Hello App!</h1>

<p>

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

</p>

<router-view></router-view></div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来

const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }

// 2. 定义路由// 每个路由应该映射一个组件。其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。

const routes = [

　　{ path: '/foo', component: Foo },

　　{ path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写) 相当于 routes: routes})

// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能

const app = new Vue({router}).$mount('#app')

router-link最后，会被编译成a标签，如下：

router-view 是个占位符，用来装当前的组件。

实例化路由对象：

let router = new VueRouter({

routes: [ {

　　path:”/”,component:组件1},{ //这里的path指当前路径为/ 时，则去加载component中的组件1放到router-view中

　　path:”/add”,component:组件2}]

})

嵌套路由的实现：

（1）设置视图。在子组件中，再次使用router-link和router-view。

（2）修改路由配置。设置相关路由的children项

let router = new VueRouter({

routes: [

{

path:”/setting”,

component:setting,

children:[ {path:”/setting/set1”,component:子组件} ] //设置子路由在访问/setting，加载setting组件下，再访问/setting/set1路径，加载子组件，就完成了2级路由

})
三级路由就是在children中在再去创建children重复上面的动作

四、created和mounted区别，以及vue生命周期

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

转载于:https://www.cnblogs.com/zhangxiaan/p/10167718.html