欢迎关注我的公众号「测试游记」
element-ui其实就是一个组件库
ref
为一个元素或者子组件的应用
组件中定义的所有的ref都会放在当前组件的 $refs
属性中
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
class="project_list_new"
@selection-change="handleSelectionChange">
</el-table>
toggleSelection() {
this.$refs.multipleTable.clearSelection();
},
this.$refs.multipleTable
就可以操作上面的内容了
一个登录页面
<template>
<div class="login">
<form action="" method="post">
<label for="username">用户名:</label>
<!-- v-bind单向绑定,只能将Model中的数据传给绑定的属性 -->
<input type="text"
id="username"
placeholder="请输入用户名"
:username="username">
<br>
<label for="password">密 码:</label>
<input type="password"
id="password"
placeholder="请输入密码"
:password="password">
</form>
<p>你输入的用户名为{{username}}</p>
<p>你输入的密码为{{password}}</p>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: 'admin',
password: 'admin'
}
}
}
</script>
<style scoped>
input {
margin: 10px auto;
font-size: medium;
}
label {
margin-right: 10px;
}
</style>
v-bind单向绑定,只能将Model中的数据传给绑定的属性
v-model双向绑定 v-model为双向绑定,既可以把Model中的数据传给绑定的属性,也可以把属性传回给Model
<input type="text"
id="username"
placeholder="请输入用户名"
v-model="username">
<br>
<label for="password">密 码:</label>
<input type="password"
id="password"
placeholder="请输入密码"
v-model="password">
<template>
<el-form :model="ruleForm"
:label-position="labelPosition"
status-icon
:rules="rules"
ref="ruleForm"
label-width="70px"
class="demo-ruleForm">
<el-form-item label="用户名">
<el-input type="text"
v-model="ruleForm.username"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password"
v-model="ruleForm.password"
autocomplete="off"></el-input>
</el-form-item>
<p>你输入的用户名为{{ruleForm.username}}</p>
<p>你输入的密码为{{ruleForm.password}}</p>
</el-form>
</template>
<script>
export default {
name: "Login_ui",
data() {
return {
ruleForm: {
labelPosition: 'right',
username: '',
password: '',
}
}
}
}
</script>
<style scoped>
.el-form {
width: 350px;
margin: 50px auto;
}
</style>
生命周期
beforeCreate
这个时候,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;
created
这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;
mounted
这个时候挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行。注意:mounted在整个实例的生命周期中只执行一次。
computed
是把所有需要依赖其他值计算的值写成对象的key值。
watch
把监听的值写成对象的key值
varvm=newVue({})
表示开始创建一个Vue实例对象InitEvents&Lifecycle
表示,刚初始化了一个Vue空的实例对象,这时候,该对象上,只有默认的一些生命周期函数和默认的事件,其他都没创建在
beforeCreate
生命周期函数执行时,data和methods中的数据都还没初始化Initinjections&reactivity
内部初始化在
created
中,data和methods都已经初始化好了。所以最早要使用他们只能在created
中create开始到beforeMount 表示Vue开始编辑模版,把Vue代码中的指令进行执行,最终在内存中生存一个编译好的最终模版字符串,然后渲染为内存中的DOM,此时只是在内存中渲染好了模版,并没有挂载到真正的页面中
beforeMount
执行这个函数的时候,模版只是在内存中编译完成,但是没有挂载到页面中,所以此时页面还是旧的Createvm.$elandreplace"el"withit
:把内存中的模版替换到浏览器页面mounted
:执行完该函数,整个Vue实例已经初始化完毕,进入运行阶段beforeUpdate
:data中数据更新了,但是页面还没更新updated
:页面和data数据同步最新了VirtualDomre-renderandpatch
:根据data中的数据,在内存中渲染一份最新的DOM树,当它更新之后,会重新渲染到真实页面中去,就相当于完成了data(Model)-> view(视图层)的更新beforeDestroy
:Vue进入销毁阶段,但是data和methods还是可用的destroyed
:组件以及被销毁了,里面的东西都不能用了
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('执行了show方法')
}
},
beforeCreate() { // 第一个生命周期函数,表示实例完全被创建出来之前,会执行它
// console.log(this.msg)
// this.show()
// 注意:在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个生命周期函数
// console.log(this.msg)
// this.show()
// 在 created 中,data 和 methods 都已经被初始化好了!
// 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
},
beforeMount() { // 第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
},
mounted() { // 第4个生命周期函数,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
// console.log(document.getElementById('h3').innerText)
// 注意:mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
},
// 接下来的是运行中的两个事件
beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?数据肯定被更新了】
/* console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是:' + this.msg) */
// 得出结论:当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
},
updated() {
console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是:' + this.msg)
// updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
}
});
</script>
组件声明
在 /src/main.js
入口js中进行声明全局组件
// 导入子组件
import HelloWorld from './components/HelloWorld'
// 创建全局组件
Vue.component('hello-world', HelloWorld);
// 使用:在App.vue中直接使用<hello-world/>
父组件,子组件之间互相调用
App.vue
<template>
<HelloWorld msg="「测试游记」" :title="title"></HelloWorld>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
// 定义组件名称
name: 'app',
components: { //声明子组件
HelloWorld,
},
data() {
return {
title: '测试游记'
}
}
}
</script>
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: { //从父组件获取msg
msg: String,
title: Number,
}
}
</script>
路由
创建单页面应用
官方路由组件,实现前端路由功能
在项目路径下安装
$ cnpm install vue-router
使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
借鉴官方操作
https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js
在 /src/router/index.js
// 0.安装并导入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1. Use plugin. 使用组件
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter);
// 2. Define route components 定义组件或导入组件
import HelloWorld from '../components/HelloWorld.vue'
import greeting from '../components/greeting.vue'
import ProjectsList from '../components/ProjectsList.vue'
import HomeWokr0917 from '../components/HomeWork0917.vue'
import HomeWokr0917_1 from '../components/HomeWork0917_1.vue'
import Login from '../components/Login.vue'
import Login_ui from '../components/Login_ui.vue'
// 3. Create the router 创建路由
const router = new VueRouter({
mode: 'history',
routes: [
{path: '/', component: HelloWorld},
{path: '/greeting', component: greeting},
{path: '/projectslist', component: ProjectsList},
{path: '/login', component: Login},
{path: '/login_ui', component: Login_ui},
]
});
// 4.导出路由
export default router;
修改 /src/main.js
,添加下面内容
// 导入vue router对象
import router from './router/index.js'
new Vue({
router,
render: h => h(App), //渲染App根组件
}).$mount('#app');
修改 /src/App.vue
的 template
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="「测试游记」" :title="title"></HelloWorld>
<router-view></router-view>
</div>
</template>
访问 \
访问 http://localhost:8080/login
在 App.vue
中添加:
<ul>
<li><router-link to="/">主页</router-link></li>
<li><router-link to="/login">登录</router-link></li>
<li><router-link to="/login_ui">登录-ui</router-link></li>
<li><router-link to="/greeting">文本</router-link></li>
<li><router-link to="/projectslist">项目</router-link></li>
</ul>
命名路由
{path: '/', component: HelloWorld, name: 'index'}
<li><router-link :to="{name:'index'}">主页</router-link></li>
在组件中可以通过 this.$router
来获取查询字符串参数
访问 http://localhost:8080/greeting?name=zx&age=18
修改 /src/components/greeting.vue
data() {
return {
message: 'Hello Python',
name: 'zhongxin',
dream: '小目标',
isNotFlag: false,
username: this.$route.query.name,
age: this.$route.query.age,
}
}
路径参数
修改 /src/router/index.js
{path: '/greeting/:username/:age', component: greeting},
修改 /src/components/greeting.vue
data() {
return {
message: 'Hello Python',
name: 'zhongxin',
dream: '小目标',
isNotFlag: false,
username: this.$route.params.username,
age: this.$route.params.age,
}
},