005 vue
文章目录
- vue常用指令
-
- 01 vue-helloworld.html
- 02 v-if与v-show.html
- 03 v-on.html
- 04 v-for.html
- 05 v-bind.html
- 06 v-model.html
- vue的生命周期
- vue组件化开发思想
- 使用vue脚手架进行模块化开发
-
- index.html
- main.js
- App.vue
- Hello.vue
- index.js
Vue官方文档
https://cn.vuejs.org/
Vue开源项目汇总
https://github.com/opendigg/awesome-github-vue
Vue.js中文社区
https://www.vue-js.com/
https://webpack.docschina.org/
https://vuejs-templates.github.io/webpack
npm install [email protected]
vue常用指令
01 vue-helloworld.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-model="num"/>
<button v-on:click="num++">点赞button>
<button v-on:click="cancle">取消button>
<h1>{{name}}，开发好用，有{{num}}个开发者购买h1>
div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",//绑定元素
data: {//封装数据
name: "macPro",
num: 1
},
methods: {//封装方法
cancle(){
this.num --;
}
},
});
script>
html>
02 v-if与v-show.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<p v-if="isShow">我是v-if数据p>
<p v-show="isShow">我是v-show数据p>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: false
}
});
script>
body>
html>
03 v-on.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<button v-on:click="count++">增加1button>
<button @click="count++">增加1button>
<button @click="add">增加1button>
<button @click="total(count)">执行total方法button>
<button @click.once="doThis">只会触发一次button>
<p>上面的按钮总被点击了{{count}}次p>
div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
data:{
count:0
},
methods: {
add:function(){
this.count++;
},
total:function(num){
console.log("累计点击次数"+num);
console.log("total方法执行了");
},
doThis:function(){
console.log("doThis方法执行了，只能执行一次");
}
}
});
script>
html>
04 v-for.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<p v-for="(item, index) in list">{{item}}----{{index}}p>
<p v-for="person in persons">{{person.name}} --- {{person.age}} --- {{person.gender}}p>
div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:'#app',
data:{
list:['迪丽热巴','古力娜扎','欧阳娜娜'],
persons:[
{name:'老王',age:38,gender:'男'},
{name:'热巴',age:26,gender:'女'}
]
}
});
script>
html>
05 v-bind.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<font size="5" v-bind:color="color1">拼多多font>
<font size="5" :color="color2">京东font>
<hr>
<a :href="'https://'+url">跳转网站a>
div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el:'#app',
data:{
color1: 'blue',
color2: 'red',
url:'www.jd.com'
}
});
script>
html>
06 v-model.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
用户名:<input type="text" id="username" v-model="user.username"><br>
密 码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="func" value="提交数据">
div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
data: {
user: {
username:'',
password:''
}
},
methods: {
func(){
console.log(this.user.username,this.user.password);
//对数据的值 再次赋值进行更新
this.user.username="tom123";
this.user.password="456"
}
}
});
script>
html>
vue的生命周期
vue⽣命周期可以分为⼋个阶段，分别是：
beforeCreate（创建前）、created（创建后）、beforeMount(载⼊前)、mounted（载⼊后）、
beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）
如果想在⻚⾯加载完毕后就要执⾏⼀些操作的话，可以使⽤created和mounted钩⼦函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
{{message}}
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'Vue的⽣命周期'
},
beforeCreate: function () {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el);
//undefined
console.log("%c%s", "color:red", "data : " +
this.$data); //undefined
console.log("%c%s", "color:red", "message: " +
this.message);//undefined
},
created: function () {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el);
//undefined
console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
},
beforeMount: function () {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " +
(this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
},
mounted: function () {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el);
//已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data);
console.log("%c%s", "color:red", "message: " +
this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data);
console.log("%c%s", "color:red", "message: " +
this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data);
console.log("%c%s", "color:red", "message: " +
this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " +
this.$data);
console.log("%c%s", "color:red", "message: " +
this.message)
}
})
// 设置data中message数据值
//vm.message = "good...";
// 销毁Vue对象
//vm.$destroy();
script>
body>
html>
vue组件化开发思想
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<button v-on:click="count++">投币了{{count}}次button>
<praise-button>praise-button>
<praise-button>praise-button>
<collect-button>collect-button>
<collect-button>collect-button>
div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
//1.VUE全局声明一个组件
Vue.component("praise-button",{
template:'',
data() {
return {
count:1
}
}
});
//2.VUE局部声明一个组件
const collectButton = {
template:'',
data() {
return {
count:1
}
}
}
let vm = new Vue({
el: '#app',
data:{
count:1
},
components:{
//声明所定义的局部组件
'collect-button':collectButton
}
});
script>
html>
使用vue脚手架进行模块化开发
全局安装webpack依赖
npm install webpack -g
全局安装vue脚手架
npm install -g @vue/cli-init
创建⼀个⽂件夹在该路径下执⾏
vue init webpack my-project
运行项目
npm install
npm run dev
访问
http://localhost:8080
index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-projecttitle>
head>
<body>
<div id="app">div>
body>
html>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: 'App.vue
首页
去Hello
Hello.vue
你好，hello，{{name}}
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Hello',
name: 'Hello',
component: Hello
}
]
})