VUE快速入门
文章目录
- 一、数据与方法
- 二、生命周期
-
- v-once
- v-html 写HTML代码
- v-bind 绑定html
- 三元运算符
- 三、模板语法--指令
-
- v-if 指令
- .stop
- Class 和style绑定
- V-if
- v-show
- 四、列表渲染
- 五、点击事件
-
- 事件修饰符
- 六、表单输入绑定
-
- v-model 双向绑定
- 七、组件
-
- 1、component
- 单文件组件
- 文件目录讲解
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
{{message}}
div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
script>
body>
html>
el：表示变量
data ：赋值
一、数据与方法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
{{message}} {{name}}
{{a}}
div>
<script type="text/javascript">
var data ={a:1};
var vm = new Vue({
el : "#app",
data :data
});
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
})
vm.$data.a = "test_______"
script>
body>
html>
二、生命周期
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
{{msg}}
div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"hi vue",
},
//在实例初始化之后，数据观测(data observer)和event/watcher 时间配置之前被调用。
//页面创建之前
beforeCreate:function(){
console.log('beforeCreate');
},
//在实例创建完成后被立即调用
//在这一步。示例已经完成一下的配置，数据观测（data observer），属性和方法的运算 watch/event事件回调。
//然而，挂在阶段还没开始，$el属性目前不可见
created:function(){
console.log('created');
},
//在挂载开始之前被调用，相关的渲染函数首次被调用
beforeMount:function(){
console.log('beforeMount');
},
//el被新创建的vm.$el替换，挂载成功
mounted:function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate:function(){
console.log('beforeUpdate');
},
//组件DOM已经更新，组件更新完毕
updated:function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "changed-----";
},30000);
script>
body>
html>
v-once
使值保持不变
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app" v-once>
{{msg}}
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg:"hi vue",
}
});
vm.msg = "hi-----";
script>
body>
html>
v-html 写HTML代码
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app" v-once>
{{msg}}
<p>Using mustahes :{{rawHtml}}p>
<p>Using v-html directive :<span v-html="rawHtml">span>p>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : ' this is should be red '
}
});
vm.msg = "hi-----";
script>
body>
html>
v-bind 绑定html
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app" v-once>
{{msg}}
<p>Using mustahes :{{rawHtml}}p>
<p>Using v-html directive :<span v-html="rawHtml">span>p>
<p v-html="rawHtml">p>
<div v-bind:class="color">test----div>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : ' this is should be red ',
color:'red'
}
});
vm.msg = "hi-----";
script>
<style type="text/css">
.red{
color: red;
}
.blue{
color: blue;
font-size: 100px;
}
style>
body>
html>
三元运算符
<p>{{ok ? 'yes' : 'no' }}p>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app" v-once>
{{msg}}
<p>Using mustahes :{{rawHtml}}p>
<p>Using v-html directive :<span v-html="rawHtml">span>p>
<p v-html="rawHtml">p>
<div v-bind:class="color">test----div>
<p>{{number+1}}p>
<p>{{ok ? 'yes' : 'no' }}p>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : ' this is should be red ',
color : 'blue',
number : 10,
ok : 0
}
});
vm.msg = "hi-----";
script>
<style type="text/css">
.red{
color: red;
}
.blue{
color: blue;
font-size: 100px;
}
style>
body>
html>
三、模板语法–指令
v-if 指令
是否展示html
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了p>
<a v-bind:href="url">-------a>
<div @click="click1">
<div @click.stop="click2">
click me
div>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
data : {
seen : false,
url : "https://cn.vuejs.org/v2/guide/syntax.html#Attribute"
},
methods : {
click1 : function(){
console.log('click1----');
},
click2 : function(){
console.log('click2-----');
}
}
});
script>
<style type="text/css">
style>
body>
html>
.stop
不涉及父级的样式
Class 和style绑定
例子一|
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
<div
v-bind:class="{active:isActive}"
style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
Hi vue
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#app',
data : {
isActive : true
}
});
script>
<style>
.active{
background: #FF0000;
}
style>
body>
html>
V-if
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<div id="app">
<div v-if="type ==='A'">
A
div>
<div v-else-if="type ==='B'">
B
div>
<div v-else-if="type ==='C'">
C
div>
<div v-else>
Not A/B/C
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
type : "A"
}
});
script>
<style type="text/css">style>
body>
html>
v-show
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/vue.js" >script>
head>
<body>
<h1 v-show="ok">
Hello!!!
h1>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
ok : true
}
});
script>
<style type="text/css">style>
body>
html>
四、列表渲染
<li v-for="item,index in items" :key = "index" >{{index}}{{item.message}}li>
:key = “index”
是获取数组的主键
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" :key = "index" >{{index}}{{item.message}}li>
ul>
<ul>
<li v-for="value,key in Object" :key = "key">{{key}}----{{value}}li>
ul>
div>
<script type="text/javascript" >
var vm = new Vue({
el : "#app",
data : {
items : [
{message : 'foo'},
{message : 'Bar'}
],
Object : {
title : 'Hello to do lists in vue',
author : 'Jane Doe',
publishedAt : '2022年2月14日'
}
}
});
script>
<style type="text/css">style>
body>
html>
五、点击事件
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<div id="example-1">
<button v-on:click="counter +=1">数值 ：{{counter}}button>
<button v-on:click="green">Greenbutton>
div>
div>
<script type="text/javascript">
var vm= new Vue({
el : "#app",
data : {
counter : 0
},
methods:{
green:function(){
alert("hi")
}
}
});
script>
<style type="text/css">
style>
body>
html>
事件修饰符
六、表单输入绑定
v-model 双向绑定
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me" />
<p> Message is :{{message}}p>
<textarea v-model="message2" placeholder="add multiple line">textarea>
<p style="white-space: pre-line;">{{message2}}p>
<br />
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "",
message2 : ""
}
});
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me" />
<p> Message is :{{message}}p>
<textarea v-model="message2" placeholder="add multiple line">textarea>
<p style="white-space: pre-line;">{{message2}}p>
<br />
<div style="margin-top: 2px;">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames" />
<label for="jack">jacklabel>
<input type="checkbox" id="john" value="john" v-model="checkedNames" />
<label for="jack">johnlabel>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames" />
<label for="jack">Mikelabel>
<br />
<span>Checked names :{{checkedNames}}span>
div>
<div style="margin-top: 20px;">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">Onelabel>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Twolabel>
<br />
<span>Picked :{{picked}}span>
div>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "",
message2 : "",
checkedNames : [],
picked : ""
}
});
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me" />
<p> Message is :{{message}}p>
<textarea v-model="message2" placeholder="add multiple line">textarea>
<p style="white-space: pre-line;">{{message2}}p>
<br />
<div style="margin-top: 2px;">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames" />
<label for="jack">jacklabel>
<input type="checkbox" id="john" value="john" v-model="checkedNames" />
<label for="jack">johnlabel>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames" />
<label for="jack">Mikelabel>
<br />
<span>Checked names :{{checkedNames}}span>
div>
<div style="margin-top: 20px;">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">Onelabel>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Twolabel>
<br />
<span>Picked :{{picked}}span>
div>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "",
message2 : "",
checkedNames : [],
picked : ""
}
});
script>
body>
html>
七、组件
1、component
1、组件复用
2、注册根节点
3、通过 Prop 向子组件传递数据
一个组件的 data 选项必须是一个函数
因此每个实例可以维护一份被返回对象的独立的拷贝：
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过
Vue.component 全局注册的：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<button-conter title = "title1:" >button-conter>
<button-conter title = "title2:" >button-conter>
div>
<script type="text/javascript">
Vue.component('button-conter',{
props:['title'],
data : function(){
return{
count:0
}
},
template:'he----
'
})
var vm = new Vue({
el :"#app",
data : {
}
})
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" >script>
<title>title>
head>
<body>
<div id="app">
<button-conter title = "title1:" @clicknow="clicknow">
<p>awerwp>
button-conter>
<button-conter title = "title2:" >button-conter>
div>
<script type="text/javascript">
Vue.component('button-conter',{
props:['title'],
data : function(){
return{
count:0
}
},
template:'he----
',
methods :{
clickfun : function(){
this.count++;
this.$emit('clicknow',this.count);
}
}
})
var vm = new Vue({
el :"#app",
data : {
},
methods:{
clicknow :function (e){
console.log(e);
}
}
});
script>
body>
html>
单文件组件
文件目录讲解
App.vue：入口文件
引入外部的文件
