1、实例化vue，根元素，数据存储，方法的定义，数据的绑定
el: element 需要获取的元素，一定是html中存在的根容器元素 data:用于数据的存储，可以是字符串、数组、json等等数据 methods:vue当中写方法的时候用的属性， 在html中调用的时候写《方法名称()》就可以了 v-bind v-html的使用方法，data-binding来绑定属性的值 例如website,websiteTag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习第一课堂</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!---vue-app是根容器-->
<div id="vue-app">
<h2>{{greet(name)}}</h2>
<p>姓名：{{name}}</p> <!--vue中的模板的语法用花括号括起来-->
<p>职位：{{job}}</p>
<p>a标签中关于v-bind的使用方法：<a v-bind:href="website">我的个人博客</a> </p>
<p>在input元素中v-bind的使用方法<input type="text" v-bind:value="name" /> </p>
v-html的使用方法
<p v-html="websiteTag"></p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
脚本部分
//实例化vue对象 new Vue({ el:"#vue-app", data:{ name:"张三", job:"软件工程师", website:"http://www.baidu.com", websiteTag:"<a href=‘http://www.baidu.com‘>百度</a>" }, methods:{ greet:function (name) { return "早上好"+name+"!" +this.job; } } });
2、Vue中事件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中使用事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="event">
<h3>通过直接在事件中更改属性值的方式操作，但是实际项目中一般不怎么用 v-on还可以用@来代表</h3>
<button @click="count++">增加购买数量</button>
<button @click="count--">减少购买数量</button>
<p>我要购买数量{{count}}</p>
<hr>
<h2>通过调用方法的方式更改属性值，用花括号调用方法的时候加括号()，在事件中调用方法加不加括弧()都可以</h2>
<button v-on:click="add">增加数量</button>
<button v-on:click="subtract">减少数量</button>
<button v-on:dblclick="add()">双击增加</button>
<button v-on:dblclick="subtract()">双击减少</button>
<button v-on:dblclick.once="subtract()">双击减少只能点击一次</button>
<p>我要操作的数量：{{record}}</p>
<div id="canvas" v-on:mousemove="updateXY">x:{{x}},y:{{y}}</div>
<h2>事件修饰符 </h2>
<a @click.prevent="" href="http://www.baidu.com">百度</a>
</div>
<script type="text/javascript" src="event.js"></script>
</body>
</html>
//实例化vue
new Vue({
el:"#event",
data:{
count:10,
record:100,
x:0,
y:0
},
methods:{
add:function () {
this.record++;
},
subtract:function () {
this.record--;
},
updateXY:function (event) {
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
}
})
3、计算属性，computed
methods方法会调用哪个方法，其他方法跟着全部执行
computed的调用哪个方法，执行哪个方法，调用的时候不能使用括弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age - {{a}}</p>
<p>Age - {{b}}</p>
<p>Age + A = {{AddtoA}}</p>
<p>Age + B = {{AddtoB}}</p>
</div>
<script type="text/javascript" src="computed.js"></script>
</body>
</html>
//脚本部分
new Vue({ el:"#vue-app", data:{ a:0, b:0, age:20 }, methods:{ /* methods方法会调用哪个方法，其他方法跟着全部执行 AddtoA:function () { console.log("Add to a"); return this.age+this.a; }, AddtoB:function () { console.log("Add to b"); return this.age+this.b; } */ }, computed:{ //computed的调用哪个方法，执行哪个方法，调用的时候不能使用括弧 AddtoA:function () { console.log("Add to a"); return this.age+this.a; }, AddtoB:function () { console.log("Add to b"); return this.age+this.b; } } })
