在html文件中加入下面的js,就可以使用vue了.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
属性绑定,字符串展示,方法的调用.属性和方法的调用都是用{{}}符号来调用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>{{greet("afternoot")}}</h1>
<h1>Hey, {{ name }}</h1>
<p>{{job}}</p>
<a v-bind:href="website">web开发</a>
<p><input type="input" v-bind:value="name"></p>
<p v-html="websiteTag"></p>
</div>
</body>
<script src="app.js"></script>
</html>
data里面都是键值对的形式,可以是字符串,数字,数组,对象,都可以.
//实例化vue对象
new Vue({
/*
el:element 需要获取的元素,一定是html中的跟容器
data:用于数据的存储.
methods:用于存储各种方法.
*/
el:"#vue-app",
data:{
name:"康骁将",
job:"web开发",
website:"https://www.baidu.com/",
websiteTag:"<a href='https://www.baidu.com/'>百度</a>"
},
methods:{
greet:function (time) {
return "Good "+time+""+this.name+"!"
}
}
});
事件的绑定
在事件中,因为肯定是个方法,所以不给括号也可以,给括号也可以,使用{{}}的话必须得加括号,如果不加的话会以为是字符串.下面的add,其实就是调用的是一个方法.
事件的绑定,v-on可以拿@替换 ,别的绑定不能替换.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<!--<button v-on:click="age++">涨一岁</button>
<button v-on:click="age--">减一岁</button>-->
<button @click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button v-on:dblclick="add(10)">双击:涨十岁</button>
<button v-on:dblclick="subtract(10)">双击:减十岁</button>
<div id="canvas" v-on:mousemove="updateXY">{{x}},{{y}}</div>
<p>My age is {{age}}</p>
</div>
</body>
<script src="app.js"></script>
</html>
在vue当中,也可以使用this关键字,用法类似于java里面的this.
//实例化vue对象
new Vue({
/*
el:element 需要获取的元素,一定是html中的跟容器
data:用于数据的存储.
methods:用于存储各种方法.
*/
el:"#vue-app",
data:{
age:22,
x:0,
y:0
},
methods:{
add:function (inc) {
if(inc){
this.age+=inc;
}else{
this.age++;
}
},
subtract:function (dec) {
if(dec){
this.age-=dec;
}else{
this.age--;
}
},
updateXY:function (event) {
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
}
});
事件修饰符 once表示只能点击一次,stop表示,鼠标移动到span标签上就停止当前事件
下面这个方法是获取到鼠标的x,y坐标.
键盘事件修饰符,enter键按下的时候才触发事件
数据双向绑定,span里面的值根据表单里的值而变化.
双向绑定方式2 直接使用v-model里面的name是与js里的name变量绑定
计算属性,当方法中有计算属性时,每当变量改变,就会把方法都调用一次,非常影响性能,使用computed就不会出现那样的情况了.使用computed的时候,不加括号,它自己会从computed找.
绑定css,class,在v-bind:class="{},大括号里面,可以写多个,key为class名字,value为boolean,来设置这个值存不存在.大括号属于一个对象.
也可以通过计算属性方法来实现,如果改变的样式多的话,就可以使用方法的形式返回.
v-if条件判断
改成else-if就俩个只能展示一个
使用v-show的话,只是为display:none,这个标签还存在,而上面的话,连标签都没有了.
v-for循环操作 template标签会优化标签.省去多余的遍历.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>v-for</h1>
<p>{{names[0]}}</p>
<p>{{names[1]}}</p>
<p>{{names[2]}}</p>
<p>--------------</p>
<div v-for="name in names">
{{name}}
</div>
<p>--------------</p>
<template v-for="name in names">
<h6>{{name}}</h6>
</template>
<p>--------------</p>
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
<p>--------------</p>
<ul>
<li v-for="user in users">
{{user.name}}-
{{user.age}}
</li>
</ul>
<p>--------------</p>
<ul>
<li v-for="(user,index) in users">
{{index+1}}-{{user.name}}-
{{user.age}}
</li>
</ul>
<template v-for="(user,index) in users">
<template v-for="(key,value) in user">
<p>{{index}}-{{key}}-{{value}}</p>
</template>
</template>
</div>
</body>
<script src="app.js"></script>
</html>
调用多个vue对象
组件的使用,直接就可以使用自定义标签来展示内容,template就是标签展示的内容.组件当中的data,methods可以在template里面直接使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>初识Vue组件</h1>
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
</body>
<script src="app.js"></script>
</html>
Vue.component("greeting",{
template:`<p>{{name}}:大家好
<button v-on:click="changeName">改名</button>
</p>`,
data:function () {
return {
name:"康骁将"
}
},
methods:{
changeName:function () {
this.name = "ch";
}
}
})
var one = new Vue({
el:"#vue-app-one"
});
var two = new Vue({
el:"#vue-app-two"
});
