vue.js入门上

vue

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div id='vue_person'>

<h1>name:{{name}}</h1>

<h1>age:{{age}}</h1>

<h1>{{SayHi()}}</h1>

<!-- 在h1标签中的{{}}是用来输出对象属性和函数的返回值的。 -->

</div>

<script src="vue.min.js"></script>

<script type="text/javascript">

//每个Vue应用都需要通过实例化Vue来实现。

//1、创建Vue实例

//var MyInfo = { name: "stephen", age: "26"}

var vm = new Vue({

el:'#vue_person', //el通常绑定的是一个选择器。

data:{ //data用于定义属性,当前存在name和age这两个属性。

name:"vichin",

age:27,

},

//data:MyInfo,可以使用对象来与vue构造函数中的data进行绑定。

methods:{ //用于定义函数,可以通过return来返回函数值。

SayHi:function () {

return 'Hello World';

}

}

});

//当一个Vue实例被创建时,它向Vue的响应式系统中加入其data对象中能够找到的所有属性,当这些属性的值发生变化的时候,html视图将也会产生相应的变化。

//我们创建的vue对象vm还有一些有用的属性和方法。在使用的时候都以$作为前缀,以便与用户自定义的属性进行区别。

//例如:当我们需要获取到id为vue_person的这个div标签时,

//1、使用js手段:

let jsGetDOM = document.getElementById('vue_person');

//2、使用vue提供的方法

let vueGetDOM = vm.$el;

jsGetDOM===vueGetDOM;//这里返回的是true!!!

//更多属性与方法:https://cn.vuejs.org/v2/api/#vm-data

</script>

</body>

</html>

vue的简单介绍

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>组件的声明周期函数</h1>

<div id="app">

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

let vm=new Vue({

el:"#app",

data:{

num:0

},

beforeCreate: function () {//整个页面创建之前所调用的生命周期函数

console.log('beforeCreate');

},

created: function () {//在Vue实例创建之后所调用的生命周期函数

console.log('Created');

},

beforeMount: function () {//挂载之前所调用的生命周期函数

},

mounted: function () {//挂载之后所调用的生命周期函数

},

beforeUpdate: function () {//在数据更新之前所调用的生命周期函数

},

updated: function () {//在数据更新之后,DOM更新之后所要调用的生命周期函数

},

beforeDestroy: function () {

},

destroyed: function () {

},

watch: {

num: function () {//监听器

console.log('变量num的值发生了变化');

}

}

});

vm.$watch('num', function (newVal, oldVal) {//观察变量num在修改前后的值

console.log(newVal, oldVal);

});

</script>

</body>

</html>

Vue中的声明周期函数

 vue中的指令:

指令后的(双)引号内的代码,都是JS的表达式。

<child v-bind:content="hello world"></child> 写法是错误的,因为不会有变量叫做hello world,如果要想向子组件child中传入字符串,正确的写法是:<child content="hello world"></child>

若是向子组件传递其他类型的参数,可以使用v-bind指令,因为=号后面的(双)引号后跟的是JS表达式。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-model指令的使用。</h1>

<h2> v-model指令可以使vue实例中的数据与html标签中的文本内容进行关联,当html标签中的文本内容发生变化时,vue实例中的数据也会随之发生变化。当实例中的数据发生变化时,html标签中的文本也会随之发生变化。(适用于 需要以数据驱动 从而生成的页面)

</h2>

<h3 style='color: red'>v-model指令用于带有value值的标签,例如:input select textarea</h3>

<div id="app">

<p>{{msg}}</p>

<input type="text" v-model='msg' />

</div>

<script src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

msg:"Hello World"

}

});

</script>

</body>

</html>

v-model

  

v-if和v-show指令在效果上是一致的,但是具体到细节上的区别是:

1、v-if会将不符合条件的html标签给注释掉,而v-show是使用css样式 dispaly:none。

2、基于上面的性质;v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。若需要频繁的切换,可以使用v-show。如果在运行时条件不大可能改变的,则使用v-if较好

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-show指令的使用。</h1>

<!-- v-if指令,常用于添加删除元素 -->

<div id="app">

<p v-show='show'>my name is vichin</p>

<p v-show='hide'>my name is stephen</p>

<p><label v-if="age < 18"></label><label>成年</label></p>

<!-- v-if后面可以放一个表达式,因为age是大于18的,所有条件不成立,所有‘未’字不显示出来。 -->

</div>

<script src="vue.min.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

show:true,

hide:false,

age:27

}

});

</script>

</body>

</html>

v-show

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-if指令的使用。</h1>

<!-- v-if指令,常用于添加删除元素 -->

<div id="app">

<p v-if='show'>my name is vichin</p>

<p v-if='hide'>my name is stephen</p>

<p><label v-if="age < 18"></label><label>成年</label></p>

<!-- v-if后面可以放一个表达式,因为age是大于18的,所有条件不成立,所有‘未’字不显示出来。 -->

</div>

<script src="vue.min.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

show:true,

hide:false,

age:27

}

});

</script>

</body>

</html>

v-if

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-else指令的使用。</h1>

<!-- v-else指令需要配合v-if或者v-else-if来使用。 -->

<div id='app'>

<p>

<lable>vicin今年的年龄是:{{age}}。</lable>

<label v-if="age < 18">不属于</label>

<!-- 如果v-else不是紧跟着v-if来用的,就会报编译错误! -->

<label v-else>属于</label> <!-- v-else的使用 -->

<label>成年人</label>

</p>

</div>

<script type="text/javascript" src="vue.min.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

show:true,

hide:false,

age:27

}

});

</script>

</body>

</html>

v-else

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-else-if指令的使用。</h1>

<div id='app'>

<p>输入的成绩对应的等第是:</p>

<p v-if='score >= 90'>优秀</p>

<p v-else-if='score >= 75'>良好</p>

<p v-else-if='score >= 60'>及格</p>

<p v-else>不及格</p>

<input type="text" v-model='score' />

</div>

<script type="text/javascript" src="vue.min.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

score:85

}

});

</script>

</body>

</html>

v-if、v-else-if、v-else综合使用

v-for的优先级别高于v-if之类的其他指令。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-for指令的使用。</h1>

<!-- 适用于基于数据渲染一个列表,类似于JS中的遍历。其数据类型可以是Array、Object、number、string

该指令必须使用特定的语法(item、index) in items,为当前遍历元素提供别名。 -->

<div id='app'>

<!-- 遍历数组 -->

<p v-for="(score,index) in scores" v-bind:key="index">

<!--不建议使用index来作为key,因为可能会存在些许性能影响。建议使用后台传过来的数据中的主键来作为key,(硬要用的话,也没问题) -->

<label>第{{index + 1}}名分数是:</label><label>{{score}}</label>

</p>

<!-- 遍历一个对象 -->

<p v-for="e in employee" v-bind:key="key">

{{e}}

</p>

<!-- 遍历一个string -->

<p v-for="str in weather">

{{str}}

</p>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

//在vue中,建议使用push pop shift unshift splice sort reverse等方法来操作数组,这样数组产生的变化才会影响DOM。

//vm.$set(vm.scores,0,80) 或者Vue.set(vm.scores,0,80) 也可以让DOM发生变化。更改scores的引用也可以!

scores: [95, 85, 75, 65],

//当需要往这个对象中添加一个属性的时候,我们直接用employee.address='SZ'是不会影响DOM的,需要将整个employee这个对象所指的那个引用进行更改,

//即:vm.employee={ name: 'vichin', age: 18, sex: 'M', address:'SZ' }

//或者使用Vue.set(vm.employee,'address','SZ')//通过set方法,向vm.employee这个对象添加一个属性,值为SZ。

//vm.$set(vm.employee,'address','SZ')

employee: { name: 'vichin', age: 18, sex: 'M' },

weather: 'TodayIsSoCold'

}

});

</script>

</body>

</html>

v-for指令

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-for指令的使用。</h1>

<div id='app'>

<table>

<thead>

<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

</thead>

<tbody>

<tr v-for="p in persons">

<td>{{p.name}}</td>

<td>{{p.age}}</td>

<td>{{p.sex}}</td>

</tr>

</tbody>

</table>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

persons:[

{name:"vichin",age:18,sex:"M"},

{name:"stephen",age:19,sex:"M"},

{name:"james",age:20,sex:"M"},

{name:"wade",age:21,sex:"M"}

]

}

});

</script>

</body>

</html>

v-for指令demo

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>v-text、v-html指令的使用。</h1>

<div id='app'>

<p v-text="msg">p标签中,原文本</p>

<!-- 使用v-text指令,会将标签中原文本给替换掉 -->

<div v-html="htmlContent"></div>

<!-- 向页面输入html标签 -->

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

msg:"Today is so cold",

htmlContent:"<input type='date' />"

}

});

</script>

</body>

</html>

v-text、v-html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.active{

background-color: orangered;

font-size: 20px;

color: #fff;

}

</style>

</head>

<body>

<h1>v-bind指令的使用。</h1>

<h2>动态绑定一个或多个特性、或一个组件prop到表达式,v-bind指令可以再其名称后面带一个参数,中间用一个冒号隔开。这个参数通常是HTML元素的特性。

例如:

绑定属性: v-bind:src='../img/pic.png' 可以缩写成::src="../img/pic.png"

绑定一个类:v-bind:class="{red:isRed}" 或 :class="[classA,classB]"

绑定样式 v-bind:style="{font-size:size+'px'}" 或 :style="[styleObjectA,styleObjectB]"

绑定一个有属性的对象,比如:v-bind="{id:someProp,'other-attr':otherProp}"

</h2>

<div id='app'>

<!-- 绑定一个属性,imgSrc是一个变量-->

<img v-bind:src="imgSrc" v-bind:id='fontColor' v-bind:alt="alt">

<!-- 给标签动态绑定类 -->

<p v-for="(college,index) in colleges" :class="index === activeIndex ? 'active' : ''">

{{college}}

</p>

<!-- <div v-bind:class='[isActive?"active":"",isGreen?"green":""]'>样式绑定(支持多个,当isActive为true的时候,active样式就会生效)</div> -->

<div v-bind:class='{active:isActive,green:isGreen}'>样式绑定(支持多个,当isActive为true的时候,active样式就会生效)</div>

<!-- 绑定样式 -->

<p v-bind:style='{color:fontColor}'>Today is so cold</p>

<div v-bind:style="{color:fontColor,background:isGreen?'#FF0000':'',fontSize:'50px'}">绑定内联样式</div>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

imgSrc:".../img/pic1.png",

alt:"我是天才",

colleges:[

'清华大学',

'北京大学',

'南京大学',

'浙江大学'

],

activeIndex:2,

fontColor:"blue",

isActive:true,

isGreen:false

}

});

</script>

</body>

</html>

v-bind

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.active{

background-color: orange;

font-size: 20px;

color: #fff;

}

</style>

</head>

<body>

<h1>v-on指令的使用。</h1>

<!-- 动态的绑定一个或多个特性,或一个组建prop到表达式;其作用和v-bind类似。注意:如果用在普通元素上时,只能监听原生DOM事件;但是如果用在自定义元素组件上时,也可以监听子组建触发的自定义事件。

常用修饰符:

.stop---调用event.stopPropagation()。停止冒泡

.prevent---调用event.preventDefault()。停止监听原生事件。

.capture---添加事件侦听器时使用capture模式。

.self---只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyCode|keyAlias}---只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once---触发一次。 -->

<p>使用手法:</p>

<div id='app'>

<button v-on:click="doThis">方法处理器</button>

<button v-on:click="doThat('hello',$event)">内联语句</button>

<button @click="doThis">缩写</button>

<button @click.stop="doThis">停止冒泡</button>

<button @click.prevent="doThis">阻止默认行为</button>

<!-- 阻止默认行为,没有表达式 -->

<form @submit.prevent></form>

<!-- -->

<button @click.stop.prevent="doThis">串联修饰符</button>

<input @keyup.enter="onEnter" value="键式修饰符,键别名" />

<input @keyup.13="onEnter" value="键式修饰符,键代码" />

<button v-on:click.once="doThis">事件只触发一次</button>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

var vm = new Vue({

el:'#app',

data:{

msg:"Today is so cold",

fontColor:'#5CCCFA',

fontWeight:"bold",

fontSize: 30

},

methods:{

doThis(){

console.log(1);

},

onEnter(){

console.log(2)

},

doThat:function (para1,para2) {

console.log(3);

}

}

});

</script>

</body>

</html>

v-on

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#app{

margin:50px auto;

width: 600px;

}

fieldset{

border: 1px solid orangered;

margin-bottom: 100px;

}

fieldset input{

width:200px;

height: 20px;

margin: 10px 0;

}

fieldset select{

margin: 10px 0;

}

table{

width:600px;

border: 2px solid orangered;

text-align: center;

}

thead{

background-color: orangered;

}

</style>

</head>

<body>

<div id="app">

<!-- 第一部分 -->

<fieldset>

<legend>员工录入系统</legend>

<div>

<span>姓名:</span>

<input type="text" placeholder="请输入姓名" v-model='newEmp.name'/>

</div>

<div>

<span>年龄:</span>

<input type="text" placeholder="请输入年龄" v-model='newEmp.age'/>

</div>

<div>

<span>性别:</span>

<select v-model='newEmp.sex'><option value="M"></option><option value="F"></option></select>

</div>

<button @click="createNewEmp()">创建新用户</button>

</fieldset>

<!-- 第二部分 -->

<table>

<thead>

<tr>

<td>姓名</td>

<td>年龄</td>

<td>性别</td>

<td>删除</td>

</tr>

</thead>

<tbody>

<tr v-for="(p,index) in persons">

<td>{{p.name}}</td>

<td>{{p.age}}</td>

<td>{{p.sex}}</td>

<td><button @click="DelEmp(index)">删除</button></td>

</tr>

</tbody>

</table>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

let vm=new Vue({

el:"#app",

data:{

persons:[

{name:"vichin",age:27,sex:"M"},

{name:"stephen",age:28,sex:"M"},

{name:"james",age:29,sex:"M"},

{name:"wade",age:30,sex:"M"}

],

newEmp:{name:"",age:0,sex:"M"}

},

methods:{

createNewEmp(){

if(this.newEmp.name===""){

alert('姓名不能为空!');

return;

}

if(this.newEmp.age<18){

alert('不得录用未成年人!');

return;

}

//往数组中添加一条记录

this.persons.unshift(this.newEmp)

//清空数据,下次再添加的时候,就没有任何关联了

this.newEmp={name:"",age:0,sex:"M"};

},

DelEmp(index){

this.persons.splice(index, 1);

}

}

});

</script>

</body>

</html>

指令小demo(用户管理)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>v-once指令与动态组件component</title>

</head>

<body>

<p>component是vue自带的组件,一开始进入页面时,变量type的值是child,这个时候component组件就会去加载child这个组件,当点击按钮将type的值更改为body-content的时候,component组件就会去加载body-content这个组件

</p>

<div id="root">

<component :is="type"></component>

<button @click="handleBtnClick">change</button>

</div>

<script src="vue.js"></script>

<script>

//使用v-once指令会有效的提高一些静态内容的展示性能

Vue.component('child', {

//template: '<div>child</div>'这里不适用v-once指令,当页面显示的内容切换成body-content时,vue会去销毁掉child这个组件,当处于body-content时,再切换回child时,会销毁body-content组件,再重新创建child组件。

template: '<div v-once>child</div>'//使用了v-once指令后,当vue创建好这个组件后,会将该组件进行缓存,当页面从body-content切换回child组件时,会去缓存中获取child组件,而非去重新创建。

});

Vue.component('body-content', {

//template: '<div>body-content</div>'

template: '<div v-once>body-content</div>'

});

var vm = new Vue({

el: '#root',

data: {

type: 'child'

},

methods: {

handleBtnClick: function () {

this.type = this.type === 'child' ? 'body-content' : 'child';

}

},

});

</script>

</body>

</html>

v-once指令与动态组件component

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>计算属性</h1>

计算属性顾名思义就是这个属性是通过计算得来的,所以在调用的时,在插值表达式中使用了reserve,而并不是reserver(),这样的一个方法的调用形式。

当页面重新渲染的时候(不是刷新页面),计算属性所依赖的变量(在这里所依赖的属性是lastname和firstname)没有发生任何改变时,该计算属性的结果不会发生变化,直接读取缓存使用。

当属性需要较大的计算或改变频率较低的时候,推荐使用计算属性。

而method是当页面重新渲染的时候(页面元素data变化,页面就会重新渲染),都会调用method

<div id="app">

<p>初始值:{{lastname}}</p>

<p>翻转值:{{reserveStr()}}</p>

<p>计算属性:{{reserve}}</p>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

let vm = new Vue({

el: "#app",

data: {

lastname: "vichin",

firstname: 'wei'

},

methods: {

reserveStr() {

return (this.lastname + " " + this.firstname).split("").reverse().join('');

}

},

computed: {

reserve: function () {

return this.lastname + " " + this.firstname;

}

// reserve: {

// get: function () {

// return (this.lastname + " " + this.firstname).split("").reverse().join('');

// },

// set: function (value) {//当设置这个计算属性的值的时候,set方法就会被执行。在控制台中输入vm.reserve='stephen',会打印出stephen123

// console.log(value + "123");

// }

// },

//计算选项,默认只有get方法。get方法return值

// reserve() {

// return (this.lastname + " " + this.firstname).split("").reverse().join('');

// },

}

});

</script>

</body>

</html>

计算属性

  

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>全局组件</title>

</head>

<body>

<h1>全局组件</h1>

<div id="app">

<my-date v-bind:para='1' >

<h3>向插槽内写入信息,如果组件中的slot标签去除,那么这段文字将不会显示</h3>

</my-date>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

//1、创建实例

let vm=new Vue({

el:"#app"

});

//2、创建组件构造器

let profile=Vue.extend({

//模板选项

//使用slot标签声明一个插槽,在使用组件的时候,可以向插槽内输入想要的内容。

template:`<div><p v-on:click='Clickme'>今天是过了大雪了!</p><slot></slot></div>`,

props:['para'],//使用props来接收父组件传递的参数。

methods:{

Clickme:function () {

console.log(this.para);

}

}

});

//3、注册一个组建

Vue.component('my-date',profile);

</script>

</body>

</html>

全局组件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>组件参数校验</title>

</head>

<body>

<div id='app'>

<child :content="'123456'"></child>

<child content='vichin'></child>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

Vue.component('child', {

//props: ['content'],//最基础的接收参数的方法。

props: {

//content: String//定义接受到的参数必须为string类型的。

// content: [String, Number] 接收到的参数可以是String类型,也可以是Number类型。

content: {

type: String,

required: true,//调用子组件时,必须要传递content参数

default: 'default value',

validator: function (value) {

return value.length > 5;

}

}

},

template: '<div>{{content}}</div>'

});

var vm = new Vue({

el: '#app'

});

</script>

</body>

</html>

组件参数校验

使用is属性指定名称来解决模板标签出现的bug。ol标签下必须要写li标签,select标签内必须要写option标签,table标签内必须要写tr标签(H5编码规范)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>document</title>

</head>

<body>

<div id='app'>

<table>

<row></row>

</table>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

Vue.component('row', {

template: "<tr><td>this is a row</td></tr>"

});

var vm = new Vue({

el: '#app'

});

</script>

</body>

</html>

不使用is属性

不使用is属性生成的DOM(tr标签并没有在table标签内)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div id='app'>

<table>

<tr is='row'></tr>

</table>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

Vue.component('row', {

template: "<tr><td>this is a row</td></tr>"

});

var vm = new Vue({

el: '#app'

});

</script>

</body>

</html>

使用is属性来解决这一bug

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>父子组件传参</title>

<script type="text/javascript" src="vue.js"></script>

</head>

<body>

<div id="root">

<!-- 父组件通过属性的形式与子组件进行通信 -->

<!-- 使用v-bind指令声明一个属性叫做count,其值便是父组件要传递给子组件的内容 -->

<counter v-bind:count='0' @addone='addone'></counter>

<!-- 定义一个事件addOne,当事件触发时,调用handleAddOne方法。 -->

<!-- 子组件通过申明props属性来进行接收 -->

<counter v-bind:count='0' @addone='addone'></counter>

<!-- 父组件中,定义一个total -->

<div>{{total}}</div>

</div>

<script type="text/javascript">

// 定义一个局部组件

var counter={

props:['count'],//接收一个叫做count的内容。

template:'<div v-on:click="handleClick">{{number}}</div>',//使用mustache语法调用接收到的内容。

methods:{

handleClick:function () {

//this.count++;这里子组件不能随意的去修改父组件传递过来的参数。(Vue的单向数据流)

this.number+=1;

this.$emit('addone', 1);//使用$emit方法让子组件触发一个名叫addOne的事件。并让子组件传递一个参数1,告诉父组件,每次自增为1。(可以传递多个参数,只要以逗号分隔开来即可。)

}

},

data:function(){

return {

number:this.count

}//因为不能该父组件中的参数,所有可以声明一个参数为number,来接收传递过来的参数。

}

}

var vm=new Vue({

el:'#root',

data:{

total:0

},

components:{

counter:counter//注册局部组件

},

methods:{

addone:function(para){

this.total+=para;

}

}

})

</script>

</body>

</html>

使用局部组件和指令,完成一个点击计数的功能

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div id="app">

<input type="text" v-model='todovalue'/>

<button v-on:click='Addcontent'>提交</button>

<ul>

<!-- 向组件中传入参数,参数名称叫做content,值是从for循环中取出的item -->

<!-- 向组件中传入参数,参数名称叫做index,值是for循环时的索引 -->

<!-- 声明一个自定义事件,事件名叫subitem,当该事件被触发时,调用实例中的Subitem方法。 -->

<todoitem v-bind:content='item' :index='index' v-for='item,index in list' v-on:subitem='Subitem'></todoitem>

</ul>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

//创建一个全局组件

Vue.component('todoitem',{

props:['content','index'],//接收叫做content的内容

template:'<li v-on:click="click_item" >{{content}}</li>',

methods:{

click_item:function () {

this.$emit('subitem',this.i);

}

},

data:function(){

return {

item:this.content,

i:this.index

}

}

});

var vm=new Vue({

el:'#app',

data:{

list:[],

todovalue:''

},

methods:{

Addcontent:function () {

if (this.todovalue) {

this.list.push(this.todovalue);

this.todovalue='';

}

},

Subitem:function(para){

this.list.splice(para,1);

}

}

});

</script>

</body>

</html>

使用全局组件和指令,完成一个todolist

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>组件的使用</h1>

<div id="app">

<parent></parent>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

//1、子组件构造器

let child=Vue.extend({

template:`<label>子组件1</label>`

});

let child1=Vue.extend({

template:`<label>子组件2</label>`

});

//2、父组件构造器

Vue.component('parent',{

components:{

'my-child':child,

'my-child1':child1

},

template:

`

<div><my-child></my-child><my-child1></my-child1></div>

`

});

let vm=new Vue({

el:"#app"

});

</script>

</body>

</html>

父子组件

 组件通信:

  

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>多层组件通信</h1>

<!-- 父组件在div中的实际使用 -->

<div id="app">

<!-- 调用最外层组件,传递title和img信息给最外层的这个组件(通过vue实例) -->

<my-parent :imgtitle="title" :imgsrc="img"></my-parent>

</div>

<!-- 声明子组件1,用于存放图片 -->

<template id='my_img'>

<img :src="imgsrc" width="200">

</template>

<!-- 声明子组件2,用于存放标题 -->

<template id='my_title'>

<h2>{{title}}</h2>

</template>

<!-- 声明一个父组件 -->

<template id='my_parent'>

<div>

<child1 :imgsrc="imgsrc"></child1>

<child2 :title="imgtitle"></child2>

</div>

</template>

<script src="vue.min.js"></script>

<script type="text/javascript">

//1、子组件实例化

let Child1=Vue.extend({

template:"#my_img",//将组件与模板相关联

props:['imgsrc']

});

let Child2=Vue.extend({

template:"#my_title",//将组件与模板相关联

props:['title']

});

//2、注册父组件

Vue.component('my-parent',{

props:['imgtitle','imgsrc'],

components:{

'child1':Child1,

'child2':Child2

},

template:'#my_parent'

});

声明一个Vue实例

new Vue({

el:'#app',

data:{

title:'葫芦奶娃',

img:'05.jpeg',

}

});

</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">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>使用观察者模式(bus总线,发布订阅模式),来解决非父子组件的传值问题</title>

</head>

<body>

<div id="root">

<child content='dell'></child>

<child content='lee'></child>

</div>

<script src="vue.js"></script>

<script>

// 首先,声明一个Vue的实例,并将值赋值给bus。在后面再次实例化Vue对象的时候,这些对象都会有bus这个属性,并且这些属性都指向了同一个Vue对象。

Vue.prototype.bus = new Vue();

Vue.component('child', {

data:function(){

return {

content_:this.content

};

},

template: '<div @click="handleClick">{{content_}}</div>',

props: {

content: String

},

methods: {

handleClick: function () {

this.bus.$emit('change', this.content_);//bus指向了一个Vue的实例,所以是存在$emit这个方法。

}

},

mounted: function () {//生命周期函数,当该组件被挂载的时候,执行。

var _this = this;//下面的function内,this的作用域会发生变化,所以声明一个实例来指向原先this所指的引用。

this.bus.$on('change', function (msg) {//与$emit事件一样,this.bus也有on事件,用该事件去监听change事件。

_this.content_ = msg;

});

},

});

var vm = new Vue({

el: '#root'

});

</script>

</body>

</html>

非父子组件的传值

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>使用自定义事件,让子组件的信息传递给父组件</h1>

每个Vue实例都实现了时间接口;

使用$on(eventName)监听事件。

使用$emit(eventName)触发事件。

父组件可以在使用了子组件的地方直接使用v-on(或者是@)来监听子组件的触发。

<!-- 父组件在div中的实际使用 -->

<div id="app">

<my-btn @total="allcounter()"></my-btn><!-- 这里使用@total来监听total方法,没执行一下total方法后就执行一下alcounter方法 -->

<my-btn @total="allcounter()"></my-btn>

<my-btn @total="allcounter()"></my-btn>

<p>一共点击了{{totalcounter}}次</p>

</div>

<!-- 声明子组件 -->

<template id='my_btn'>

<button @click="total()">点击{{counter}}次</button>

</template>

<script src="vue.min.js"></script>

<script type="text/javascript">

//注册按钮

Vue.component('my-btn',{

template:'#my_btn',

data(){

return {

counter:0

}

},

methods:{

total(){

this.counter++;

// 通知外界,此方法被调用了

this.$emit('total');

}

}

});

// 声明一个Vue实例

new Vue({

el:'#app',

data:{

totalcounter:0

},

methods:{

allcounter(){

this.totalcounter ++;

}

}

});

</script>

</body>

</html>

使用自定义事件,让子组件的信息传递给父组件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>匿名slot(插槽————感觉有点想占位符)</h1>

<!-- 父组件在div中的实际使用 -->

<div id="app">

<my-slot>

<img src="05.jpeg" width="200" />

</my-slot>

</div>

<template id='my_slot'>

<div id='panel'>

<h2 class="panel-header">插槽头部</h2>

<!-- 预留一个插槽 -->

<slot>插槽默认显示</slot><!-- 这里的slot可以代替任何一个标签,我们在使用的时候,传入div,它就会变成div标签。传一个label就会变成lable标签,如果我们什么都不传,默认显示显示slot标签内的内容 -->

<footer>插槽尾部</footer>

</div>

</template>

<script src="vue.min.js"></script>

<script type="text/javascript">

Vue.component("my-slot",{

template:'#my_slot'

});

// 声明一个Vue实例

new Vue({

el:'#app',

data:{

totalcounter:0

},

methods:{

allcounter(){

this.totalcounter ++;

}

}

});

</script>

</body>

</html>

匿名slot

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>实名slot(插槽————感觉有点想占位符)</h1>

<div id="app">

<my-student>

<span slot='user_name'>vichin</span>

<span slot='user_age'>27</span>

<div slot='user_sex'>male</div>

</my-student>

</div>

<template id='my_student'>

<div id='main'>

<slot name='user_name'>姓名插槽</slot>

<slot name='user_age'>年龄插槽</slot>

<slot name='user_sex'>性别插槽</slot>

</div>

</template>

<script src="vue.min.js"></script>

<script type="text/javascript">

Vue.component("my-student",{

template:'#my_student'

});

// 声明一个Vue实例

new Vue({

el:'#app',

data:{

totalcounter:0

},

methods:{

allcounter(){

this.totalcounter ++;

}

}

});

</script>

</body>

</html>

具名插槽slot

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>具名插槽</title>

</head>

<body>

<div id="root">

<child>

<h3>vichin</h3>

</child>

<hr>

<body-content>

<div slot='header'>header</div>

<div slot='footer'>footer</div>

</body-content>

</div>

<script src="vue.js"></script>

<script>

Vue.component('child', {

template: '<div><p>hello</p><slot>default value</slot></div>'

});

Vue.component('body-content', {

template: '<div><slot name="header"></slot><div>content</div><slot name="footer"></slot></div>'

});

var vm = new Vue({

el: '#root'

});

</script>

</body>

</html>

具名插槽slot1

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Vue-router(用于组件之间的过渡、切换)</title>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

<style>

body{

background-color: #e8e8e8;

}

</style>

</head>

<body>

<div id="app">

<div class="row">

<div class="col-xs-8 col-xs-offset-2">

<div class="page-header">

<h1>

IT666

</h1>

</div>

</div>

</div>

<div class="row">

<div class="col-xs-2 col-xs-offset-2">

<div class="list-group">

<!-- 使用router-link来导航

通过传入to属性来指定链接

router-link默认会被渲染成一个a标签 -->

<router-link class='list-group-item' to='/h5'>HTML5</router-link>

<router-link class='list-group-item' to='/php'>php</router-link>

<router-link class='list-group-item' to='/java'>java</router-link>

</div>

</div>

<div class="col-xs-6">

<div class="panel">

<div class="panel-body">

<!-- 路由出口 -->

<!-- 将路由匹配到的组件渲染在这里 -->

<router-view></router-view>

</div>

</div>

</div>

</div>

</div>

<!-- 创建模块 -->

<template id='h5'>

<div><h2>HTML5</h2>

<p>新热点</p>

<div>

<ul class="nav nav-tabs">

<router-link to='/h51'>基础班</router-link>

<router-link to='/h52'>进阶版</router-link>

</ul>

<div class="tab-content">

<router-view></router-view>

</div>

</div>

</div>

</template>

<template id='h51'>

<div><h3>HTML5基础</h3>

<p>这是会讲解基础的一些信息</p>

</div>

</template><template id='h52'>

<div><h3>HTML5进阶</h3>

<p>这里会阐述进阶的一些信息</p>

</div>

</template>

<template id='php'>

<div><h2>php</h2>

<p>拍黄片</p>

</div>

</template>

<template id='java'>

<div><h2>java</h2>

<p>扎哇</p>

</div>

</template>

<script src="vue.min.js"></script>

<script type="text/javascript" src="Vue-router.js"></script>

<script type="text/javascript">

//1、创建组件

const HTML5=Vue.extend({

template:'#h5'

});

const HTML51=Vue.extend({

template:'#h51'

});

const HTML52=Vue.extend({

template:'#h52'

});

const php=Vue.extend({

template:'#php'

});

const java=Vue.extend({

template:'#java'

});

//2、定义路由

const routes=[

// 一级路由的配置

{

path:'/h5',

component:HTML5,

children:[//配置二级路由

{path:'/h51',component:HTML51},

{path:'/h52',component:HTML52},

{path:'/',redirect:'/h51'}

]

},

{path:'/php',component:php},

{path:'/java',component:java},

// 配置根路由

{path:'/',redirect:'/h5'}

]

//3、创建路由实例

const router=new VueRouter({

routes//使用ES6语法(对象结构)

});

//4、创建Vue实例,并与元素进行绑定

new Vue({

router

}).$mount('#app')

</script>

</body>

</html>

Vue-router

菜鸟教程上的demo

class和style的高级用法,其中showWarning和mix是vue实例下的一个方法,warning是vue实例下的一个对象。

以vue结尾的文件叫做单文件组件。
模板放在template标签内,行为放在script标签内,样式放在style标签内。
首次运行项目,先进入到文件夹 cd travel。然后再使用命令 npm run dev
启动一个项目使用npm run start
停止一个服务npm travel clear
在vue项目中进行页面跳转不适用a标签,而是使用<router-link to='/list'>标签。to后面表示要跳转的页面。项目中是跳转到list这个页面。
npm install fastclick --save 将fastclick这个包安装到项目的依赖之中,不管是在开发环境之中,还是在打包生成线上版本的代码都需要使用fastclick(会将版本信息写道package.json文件里的dependencies节点)
在style标签中使用scoped属性,可以让style标签中的样式只能应用于本组件中<style lang='stylus' scoped></style>
安装axios: npm install axios --save

 在使用:style="{font-weight:fontWeight(实际这的值是一个bold)}"给标签增加样式时,发现运行不了,后来将font-weight改写成fontWeight之后,就可以正常运行了。是不是在vue中,不支持横杠的出现?

在使用父子组件的时候,<div><my-child></my-child><my-child1></my-child1></div>,如果将my-child和my-child1这两个组件分别放在两个div中,那么就会只显示第一个组件,第二个组件并不显示。(<div><my-child></my-child></div><div><my-child1></my-child1></div>)

父组件标签中,不能单独使用子组件的标签,如若想用,必须重新在外部注册成另外一个组件

以上是 vue.js入门上 的全部内容, 来源链接: utcz.com/z/378887.html

回到顶部