vue基礎課堂一
阿新 • • 發佈：2018-04-05
實例 javascrip json 對象 括號 事件 關於 軟件工程 web
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; } } })
vue基礎課堂一