一、导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
二、Vue基本语法
<div id="op">
<span v-bind:title="msg">鼠标绑定事件,鼠标放上去会显示A</span>
</div>
<script>
const vm = new Vue({
el: "#op",
data: {
msg: 'A',
}
});
</script>
if判断
<div id="op">
<h1 v-if ="msg==='A'">A</h1>
<h1 v-else-if ="msg==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script>
const vm = new Vue({
el: "#op",
data: {
msg: 'A',
}
});
</script>
for循环
<div id="op">
<ul>
<li v-for = "item in items">
{{items.message}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#op",
data: {
items: [
{ message: 'A' },
{ message: 'B' },
{ message: 'C' },
]
}
});
</script>
绑定事件
<div id="op">
<button v-on:click="sa"> me</button>
</div>
<script>
var vm = new Vue({
el: "#op",
data: {
message: "出来"
},
methods: {
sa: function(){
alert(this.message)
}
}
});
</script>
v-model双向绑定
<div id="op">
<textarea v-model="message"></textarea>{{message}}
<p>输入:</p><input type="text" v-model="message">{{message}}
</div>
<script>
var vm = new Vue({
el: "#op",
data: {
message: "123"
},
});
</script>
表单双向绑定
<div id="op">
<input type="radio"name="sex" value="男"v-model="atp">男
<input type="radio"name="sex" value="男"v-model="atp">女
<p>选中了:{{atp}}</p>
</div>
<script>
var vm = new Vue({
el: "#op",
data: {
atp: ''
},
});
</script>
下拉框双向绑定
<div id="op">
<select v-model="atp">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>v:{{atp}}</span>
</div>
<script>
var vm = new Vue({
el: "#op",
data: {
atp: ''
},
});
</script>
组件
<div id="op">
<!-- 组件:传递给组件中的值:props -->
<hahah v-for="item in atp" v-bind:t="item"></hahah>
</div>
<script>
//定于一个Vue组件component
Vue.component("hahah",{
props: ['t'],
template: '<li>{{t}}</li>'
}) ;
var vm = new Vue({
el: "#op",
data: {
atp: ["前端","后端","服务端"]
},
});
</script>
Axios异步通信
导入Axios在线包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
slot插槽事件
<div id="op">
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems":item="item"></todo-items>
</div>
<script>
Vue.component("todo",{
template:'<div>\<slot></slot>\
<ul>\
<slot></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item'],
template:'<li>{{item}}</li>'
});
var vm = new Vue({
el: "#op",
data : {
title:"hhhh",
todoItems : ['第一个','第二个','第三个']
}
});
</script>
</body>
自定义事件
<div id="op">
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems":item="item"
v-bind:index="index" v-on:remove="removeItems(index)":key="index"></todo-items>
</div>
<script>
Vue.component("todo",{
template:'<div>\<slot></slot>\
<ul>\
<slot></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template:'<div>{{title}}</div>',
});
Vue.component("todo-items",{
props: ['item','index'],
//只能绑定当前组件的方法
template:'<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
methods: {
remove: function(index){
//this.$emit自定义事件分发
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#op",
data : {
title:"hhhh",
todoItems : ['第一个','第二个','第三个']
},
methods: {
removeItems:function(index){
console.log("删除了"+this.todoItems[index])
this.todoItems.splice(index,1);
}
}
});
</script>
Webpack打包
首先建一个项目文件夹,然后在项目文件夹中建两个js文件
第一个
exports.sh = function(){
document.write("<h1>123</h1>");
}
第二个这个是运行的入口,来调用第一个中的方法
var hello =require("./hod");
hello.sh();
然后在项目文件夹外面建一个打包文件webpack.config.js:名字不能变,否则在打包的过程中会报错
module.exports = { //webpack.config.js中的代码
entry:'./mode/main.js',//文件入口,指订Web用哪个文件做为项目入口
output:{//输出,指订Webpack把处理完成的文件放置到指订的路径
filename: "./js/bundle.js"
}
}
建好以后去调试,在VS Code终端输入webpack进行包,打包成功会出来dist文件夹里面的js文件就是被打包好的,然后再建个HTML文件进行调用打包的js
<script src="dist/js/bundle.js"></script>
Vue创建工程文件
路由配置
首先建一个工程文件然后配置router如下:
然后在工程文件下新建一个文件夹components,在文件夹下面新建vue网页作为跳转页输入内容
去index.js文件里面配置路由
import Vue from 'vue'
//导入router包
import VueRouter from 'vue-router'
//vue文件名 文件夹名字和vue文件名
import Conts from '../components/Conts'
import Mian from '../components/Mian'
import he from '../components/he'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[{
//路由路径
path:'/content',
//跳转的组件
component:Conts
},
{
//路由路径
path:'/main',
//跳转的组件
component:Mian
},
{
//路由路径
path:'/he',
//跳转的组件
component:he
}]
});
在main.js下配置
import Vue from 'vue'
import App from './App'
//导入router包
import router from './router'//自动扫描里面的路由配置文件index.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//调用router
components: { App },
template: '<App/>'
})
最后一步去App.vue下去调用
<template>
<div id="app">
<h1>123</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link>
<router-link to="/he">新增</router-link>//此标签和HTML中的标签相似
<router-view></router-view>//显示内容
</div>
</template>
<script>
启动终端输入 npm run dev 进行调试,,,最后运行效果图
调用ElementUI框架
建一个views文件夹用来存放Vue文件,建一个router文件夹放路由配置
配置路由界面
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router);
//配置路由
export default new Router({
routes:[
{
path :'/main',
component:Main
},
{
path :'/login',
component:Login
}
]
});
调用界面
import Vue from 'vue'
import App from './App'
//导入router包
import router from './router'
//导入ElementUI 框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(router);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)//声明ElementUI
})
使用
<template>
<div id="app">
<h1>123</h1>
<router-link to="/login">首页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>