Vue快速入门
文章目录
- 一、Vue快速入门
-
- 1、第一个Vue程序
- 2、Vue基本语法
-
- 2.1、if判断
- 2.2、for循环
- 2.3、事件
- 2.4、事件双向绑定
- 3、Vue组件
- 4、Axios异步通信
- 5、计算属性
- 6、插槽slot
- 7、自定义事件内容分发
- 8、创建vue项目
- 二、Vue实战
-
- 1、项目创建
- 2、项目开发
- 未完结
一、Vue快速入门
1、第一个Vue程序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
message:"hello,vue!"
}
});
script>
body>
html>
2、Vue基本语法
2.1、if判断
div id="app">
<h1 v-if="ok">Yesh1>
<h1 v-else>NOh1>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
ok: true,
type: a
}
});
script>
<h1 v-if="ok">Yesh1>
<h1 v-else>NOh1>
<h1 v-else-if ="type='a'">ah1>```
2.2、for循环
<div id="app">
<li v-for="item in items">
{{item.message}}
li>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
items:[
{message: '狂神说Java'},
{message: '狂神前端'}
]
}
});
script>
<li v-for="item in items">
{{item.message}}
li>
2.3、事件
DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<button v-on:click="vm.sayHi()">anniubutton>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
//MODEL:数据
data:{
message: "java"
},
methods:{ //方法必须定义在Vue的Methon对象中,v-on:事件
sayHi: function (){
alert(this.message)
}
}
});
script>
body>
html>
2.4、事件双向绑定
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
输入文本： <input type="text" v-model="message">{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
script>
body>
html>
绑定单选框
<div id="app">
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了谁：{{message}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
script>
绑定下拉框
<div id="app">
<select v-model="message">
<option value="" disabled>---请选择---option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>value:{{message}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
});
script>
3、Vue组件
<div id="app">
<geng v-for="item in items" v-bind:bang="item">geng>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
Vue.component("geng",{
props:['bang'],
template:'{{bang}} '
});
var vm = new Vue({
el:"#app",
data:{
items: ["java","linux"]
}
});
script>
4、Axios异步通信
<style>
[v-clock]{
display: none;
}
style>
head>
<body>
<div id="app" v-clock>
<div>{{info.name}}div>
<a v-bind:href="info.url">点我a>
<div>{{info.page}}div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
//请求的返回参数格式必须合适，必须和json字符串一样
info:{
name:null,
url:null,
page:null
}
}
},
mounted(){ //钩子函数 链式编程
axios.get('../data.json').then(response=>(this.info = response.data));
}
});
script>
5、计算属性
<div id="app">
<p>{{currentTime1()}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data: {
message:"hello"
},
methods: {
currentTime1: function (){
return Date.now(); //返回一个时间戳
}
},
computes:{ //计算属性 : methods,computed方法名不能重名，重名之后，只会调用methods的方法
currentTime2:function (){
return Date.now();
}
}
});
script>
computed是一个属性，调用时用vm.currentTime2
而methods是方法，调用时用currentTime（）
计算属性可以想象成缓存
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的，此时可以考虑将这个结果缓存起来，采用计算属性可以做到这一点，计算属性主要特性是为了将不经常变化的结果进行缓存，以节约系统的开销。
6、插槽slot
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title">todo-title>
<todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
//定义slot插槽
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:"秦老师列表",
todoitems:['狂神说java','狂神说前端','狂神说Linux']
}
});
script>
7、自定义事件内容分发
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
//定义slot插槽
Vue.component("todo",{
template:
'\
\
\
'
});
Vue.component("todo-title",{
props: ['title'],
template: '{{title}}'
});
Vue.component("todo-items",{
props: ['item','index'],
template: '{{index}}---{{item}} ',
methods:{
remove: function (index){
this.$emit('remove',index)
}
}
});
var vm = new Vue({
el:"#app",
data:{
title:"秦老师列表",
todoitems:['狂神说java','狂神说前端','狂神说Linux']
},
methods: {
removeItem:function (index){
console.log("删除了"+this.todoitems[index]);
this.todoitems.splice(index,1); //一次删除一个元素
}
}
});
script>
8、创建vue项目
1、创建初始化项目 vue init webpack hello-vue
2、进入工程目录 cd hello-vue
3、 安装vue-router npm install vue-router --save-dev
4、安装element -ui npm i element -ui -S
5、安装依赖 npm install
6、安装 SASS 加速器 cnpm install sass-loader node-sass --save-dev
7、启动测试 npm run dev
二、Vue实战
1、项目创建
1、新建一个存放项目的文件夹
2、打开dom窗口，进入存放项目的文件夹
3、执行命令：vue create yeb(项目名称) -------版本问题，在vue3版本以下会不兼容，需安装3版本以上
4、选择router和一个默认选项
5、启动项目 cd yeb -------npm run serve
6、使用Webstorm打开创建好的项目
2、项目开发
1、安装 ----饿了么-ui
执行命令：npm i element-ui -S
2、在main.js中配置element-ui
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);