轉前端的第一天
國慶好無聊呀，莫事干只好敲一敲代碼，原計劃跟朋友準備去看panda，想了想兩個人會不會很尷尬，還是等人多起來再去吧，
1.準備作業
準備好環境
1.nodejs
2.vue/cli
使用powershell創建一個vue專案
cd + 專案存放路徑
vue create + 專案名
出現以上問題不要慌張
輸入以下命令，修改其執行策略，
set-ExecutionPolicy RemoteSigned
根據提示創建好專案后，進入到專案目錄，把專案先跑起來
npm run serve
訪問本地8080后顯示如下，就說明專案成功啟動
2.基本語法
以引入script檔案為例來說，首先第一步，創建一個html檔案，需要匯入vue的js檔案,官網上快速開始的樣例如下：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
完整是這樣的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Vue基礎</title>
</head>
<body>
<div id = "app">
<!-- 差值運算式 -->
{{ message }}<br>
{{ myMessage.name }}<br>
<ul>
<li>
{{girlFriends[0]}}
</li>
</ul>
<h2 v-text="message">打招呼</h2>
<h2>打招呼{{message}}</h2>
<p v-html="message"></p>
<input type="button" value="v-on" v-on:click = "doIt">
<input type="button" value="v-on" @click = "doIt">
</div>
<script>
var app = new Vue({
// #是id選擇器，設定掛載點
el:"#app",
data:{
message:"hello Vue!",
myMessage:{
name:"yokna",
mobile:"181xxxxxxxx"
},
girlFriends:["girl1","girl2","girl3"]
},
methods:{
doIt:function(){
alert("ahahaha");
}
},
})
</script>
</body>
</html>
script中創建一個vue實體，然后通過id選擇器選擇需要掛載的dom元素上，data中寫待用的資料，這樣就可以將資料渲染出來，
v-text:將字符內容系結到標簽上
v-html:將html內容系結到標簽上，并且自動決議成html標簽
v-on：為元素系結一個事件，可以替代成@
v-show:設定一個組件是否顯示，一般來說與data中的資料配合使用
v-if:根據運算式的真偽值，來切換元素的顯示與隱藏
v-bind:設定元素的屬性，也可以用:來代替
<div id = "app3">
<input type="button" value="是否顯示圖片？" @click = "changeIsShow">
<img src="img.jpg" v-show="isShow">
<img src = "img.jpg" v-if="isShow">
<img :src="imgSrc" :title="imgTitle+'!!!'">
</div>
var app3 = new Vue({
el:"#app3",
data:{
age:17,
imgSrc:"img.jpg",
imgTitle:"中秋快樂",
isShow:true
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
v-for:根據資料生成串列結構
v-on自定義引數以及事件修飾符
v-model:雙向資料系結
<div id="app">
<ul>
<li v-for="(item,index) in food">
{{index+1}} {{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
food:[
{name:"rice"},
{name:"egg"}
]
}
})
</script>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<input type="button" value="修改M" @click="setM">
<h2>
{{message}}
</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"nihao",
arr:[1,2,3,4,5],
food:[
{name:"rice"},
{name:"egg"}
]
},
methods:{
getM:function(){
alert("M function is running!")
},
setM:function(){
this.message = "setM";
}
}
})
</script>
今天是學起Vue的第一天，hac無聊學學，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305225.html
標籤：其他
上一篇：vue組件使用$listeners和$attrs隔代傳參
下一篇：制作js原生瀑布流插件