[学习笔记]简单的Vue教程
文章目录
- Vue
- 引入Vue
- 第一个vue程序
- if语句
- for语句
- 事件
- 数据双向绑定
- Vue组件
- Axios异步通信
- 计算属性
- slot插槽
- 自定义事件内容分发
- vue-cli
- webpack
- vue-router
- Vue与ElementUI结合
- 嵌套路由
- 参数传递
- url重定向
- 去掉url中的’#‘
- 404
- 路由钩子
Vue
引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue">script>
第一个vue程序
<body>
<div id="app">
{{ message }}
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
script>
body>
if语句
<body>
<div id="app">
<h2 v-if="type==='A'">ah2>
<h2 v-else-if="type==='B'">bh2>
<h2 v-else>noh2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
});
script>
body>
for语句
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: 'one'},
{message: 'tow'},
{message: 'three'}
]
}
});
script>
body>
事件
<body>
<div id="app">
<button v-on:click="sayHi">clike mebutton>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
messag: "hello"
},
methods: {
sayHi: function(event){
alert(this.messag);
}
}
});
script>
body>
数据双向绑定
<body>
<div id="app">
输入数据：<input type="text" v-model="message">{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123"
}
});
script>
body>
利用
v-model实现表单输入和应用状态之间的双向绑定。
v-model会忽略多有表单元素value、checked、selected特性的初始值并总将Vue实力的数据作为数据来源在
select中，如果v-model未匹配到任何值，则select会被渲染为为选中状态
Vue组件
<body>
<div id="app">
<fisher v-for="item in items" v-bind:f="item">fisher>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
// 定义一个Vue组件
Vue.component("fisher",{
props: ["f"],// 利用props传递v-bind绑定的参数
template: '{{f}} '
});
var vm = new Vue({
el: "#app",
data: {
items: ["hello", "vue", "i am fisher"]
}
});
script>
body>
利用
Vue.component();定义组件组件中不能直接获得Vue实例中的数据，需要通过
v-bind绑定数据，然后通过props: []传递给组件。
Axios异步通信
cdn引入Axios
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
Axios通信
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
[v-clock]{
display: none;
}
style>
head>
<body>
<div id="app" v-clock>
<p>{{info.name}}p>
<a v-bind:href="info.url">百度a>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data(){
return{
//参数应与json的一致
info: {
name: null,
url: null
}
}
},
mounted(){ //钩子函数 axios支持链式编程
axios.get('data.json').then(response=>(this.info = response.data));
}
});
script>
body>
html>
计算属性
计算出来的结果放在属性中，相当于缓存成静态属性，虚拟dom
将计算结果进行缓存，节约系统开销
<body>
<div id="app">
<p>{{myTime()}}p>
<p>{{myTime_com}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: "#app",
methods: { //方法
myTime: function () {
return Date.now();
}
},
computed: { //计算属性 computed与methods的方法名不能重名，否则只会调用methods的方法
myTime_com: function () {
return Date.now();
}
}
});
script>
body>
调用计算属性的方法时
不需要加()，而methods需要
slot插槽
<body>
<div id="app">
<todo>
<todo_title slot="todo_title" :title="title">todo_title>
<todo_items slot="todo_items" v-for="item in items" :item="item">todo_items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
Vue.component("todo",{
template: '\
\
\
'
});
Vue.component("todo_title",{
props: ['title'],
template: '{{title}}'
});
Vue.component("todo_items", {
props: ['item'],
template: '{{item}} '
});
var vm = new Vue({
el: "#app",
data: {
title: "标题",
items: ['内容1', '内容2']
}
});
script>
body>
自定义事件内容分发
<body>
<div id="app">
<todo>
<todo_title slot="todo_title" :title="title">todo_title>
<todo_items slot="todo_items" v-for="(item,index) in items" :item="item"
v-on:remove="removeItems(index)" :key="index">todo_items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
Vue.component("todo",{
template: '\
\
\
'
});
Vue.component("todo_title",{
props: ['title'],
template: '{{title}}'
});
Vue.component("todo_items", {
props: ['item'],
template: '{{item}} ',
methods: {
remove: function(index){
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "标题",
items: ['内容1', '内容2']
},
methods: {
removeItems: function(index){
this.items.splice(index, 1);
}
}
});
script>
body>
vue-cli
vue-cli是官方提供的脚手架，用于创建vue模板
npm是一个包管理工具
安装nodejs和npm
sudo pacman -S nodejs npm`安装这两个工具
安装Node.js淘宝加速器
npm install cnpm -g，-g全局下载下载慢使用
npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli
cnpm install vue-cli -g
创建vue项目
vue init webpack myvue
cnpm install
webpack
webpack是一个打包工具，可以将ES6规范的项目将为ES5规范
安装webpack和webpack-cli
npm install -g webpack安装完webpack后，启用它会提示安装webpack-cli
npm install -g webpack-cli
演示利用webpack打包的应用
./modules/hello.js中
//暴露一个方法
exports.sayHi = function () {
document.write("hello
");
}
./modules/main.js中
var hello = require("./hello");//引入hello.js
hello.sayHi();
./webpack.config.js中
//webpack配置文件
module.exports = {
entry: './modules/main.js',//入口
output: {
filename: "./js/bundle.js"//输出
}
};
命令行webpack进行打包
这时在指定的输出目录下会出现打包后的js文件
在./index.html中引用打包后的文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="./dist/js/bundle.js">script>
body>
html>
vue-router
安装vue-router
在项目文件夹下
cnpm install vue-router --save-dev
使用vue-router
导包
import VueRouter from 'vue-router'显示声明
Vue.use(VueRouter);
演示vue-router的使用
创建./router/index.js文件，里面存放路由信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from'../components/Hello'
import Word from '../components/world'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes: [
{
//路径
path: '/hello',
//跳转的组件
component: Hello
},
{
path: '/word',
component: Word
}
]
});
路由的组件需要import导入
在./App.vue中使用路由
<template>
<div id="app">
<h1>Vue</h1>
<router-link to="/hello">你好</router-link>
<router-link to="/word">世界</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
负责跳转
负责显示内容
Vue与ElementUI结合
下面是创建整个工程项目的步骤
整个项目需要vue-router、element-ui、sass-loader和、node-sass
创建vue工程
vue init webpack hello-vue进入目录
安装vue-router
npm install vue-router --save-dev安装element-ui
npm i element-ui -S安装依赖
npm install安装SASS加载器（后期ElementUI会用到）
cnpm install sass-loader node-sass --save-dev启动
npm run dev
在官网有介绍引入Element的方法
在main.js写入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
在运行项目时有可能出现错误，可能的原因是sass-loader版本过高
在
package.json中修改版本7.3.1然后运行
npm install重新安装包复制的组件需要在放在
中
嵌套路由
在一个路由中嵌套多个路由，在该页面下就可以显示其他页面
./router/index.js
export default new Router({
routes: [
{
path: '/login',
component: Login
},
{
path: '/login_2',
component: Login_2
},
{
path: '/main',
component: Main,
children: [
{path: '/user/profile', component: Profile},
{path: '/user/list', component: List}
]
}
]
})
配置完路由表就可以在该父路由页面使用该子路由
参数传递
参数传递：
./views/Main.vue中传递参数
个人信息
在js中可以通过跳转页面的时候传递参数
this.$router.push("/main"+ this.form.username); //this.form.username就是参数
./router/index.js中配置路由
{
path: '/main',
component: Main,
children: [
{
path: '/user/profile:id',//在这里添加参数
name:'Profile',//这里指定一个名字，在中用到
component: Profile
},
{
path: '/user/list',
component: List
}
]
}
./views/uer/Profile.vue中使用参数
{{$route.params.id}}
个人信息
在传递参数时
to要进行v-blink绑定，并且路由名不能是路径，必须是定义的路由名
还可以利用props进行参数传递
在index.js中添加props: true
children: [
{
path: '/user/profile:id',
name:'Profile',
props: true,//这里打开props
component: Profile
}
]
在Profile.vue中引用时加入
这样在调用参数时就可以直接使用{{参数名}}
{{id}}
个人信息
url重定向
在index中配置
{
path: '/home',
redirect: '/main' //重定向
}
这样
/home就会被重定向为/main
去掉url中的’#‘
route的模式有两种
hash和history
hash带’#‘
history不带
只需要把route的mode改为hisrory就可以了
修改index.js
export default new Router({
mode: 'history',//改变模式
routes: [
{
path: '/login',
component: Login
}
]
}
404
只需要创建一个404页面，配置路由时配置余下所有url都路由到404页面即可
index.js
import NotFound from "../views/NotFound";
export default new Router({
mode: 'history',
routes: [
{
path: '*',
component: NotFound
}
]
});
路由钩子
钩子函数配合axios进行加载数据
Profile.vue
{{id}}
个人信息
to: 路由将要跳转的路径信息
from: 路径跳转前的路径信息
next: 路由控制参数
- next()跳到下一个页面
- next(’/path’)改变路由的跳转方向，使其跳到另一个路由
- next(flase)返回原来的页面
- next((vm=>{}))仅在beforeRouteEnter中可用，vm是组件实例