vueJs學習筆記1
vueJS學習目錄：
教程： https://www.runoob.com/vue2/vue-class-style.html
table使用: https://c.runoob.com/codedemo/5440
vue-element-admin專案地址與執行步驟：https://github.com/PanJiaChen/vue-element-admin
- 構建後會出現:node_modules資料夾，在vue-element-admin目錄下
- Build以後會生成一個dist資料夾。
- 執行的話需要參見https://blog.csdn.net/u014054437/article/details/79981307，
具體步驟如下：
1.安裝express-generator生成器
執行 $ npm install express-generator -g 進行安裝
2. 建立一個express專案
執行 $ express expressDemo （expressDemo是專案名）
3.進入expressDemo目錄，安裝專案依賴
$ cd expressDemo
$ npm install
把dist目錄下的所有檔案複製到express專案的public資料夾下
執行 $ npm start 啟動expressDemo
開啟瀏覽器，輸入 http://localhost:3000
- expressDemo:是執行的目錄
vueJS學習筆記來自菜鳥教程：
1.
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鳥教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 學的不僅是技術，更是夢想！";
}
}
})
</script>
//輸出物件和函式返回值
<div id = “vue_det”>
<h1>site: {{ site }} </h1>
<h1>url: {{url}}</h1>
<h1>{{details()}}</h1>
</div>
//雙向繫結：
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我們的資料物件
var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// 它們引用相同的物件！
document.write(vm.site === data.site) // true
document.write("<br>")
// 設定屬性也會影響到原始資料
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
除了資料屬性，Vue 例項還提供了一些有用的例項屬性與方法。它們都有字首 $，以便與使用者定義的屬性區分開來。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我們的資料物件
var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
JavaScript表示式
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
<div v-bind:id="'list-' + id">菜鳥教程</div>
意思就是v-bind一個id，並且命名為’list-id’
<p v-if="seen">現在你看到我了</p>
v-if 指令將根據表示式 seen 的值(true 或 false )來決定是否插入 p 元素。
<div id="app">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
preventDefault() 方法阻止元素髮生預設的行為（例如，當點選提交按鈕時阻止對錶單的提交）。
在 input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
v-model 指令用來在 input、select、text、checkbox、radio 等表單控制元件元素上建立雙向資料繫結，根據表單上的值，自動更新繫結的元素的值。
arrayObject.slice(start,end) 引數描述 start 必需。規定從何處開始選取
v-bind 縮寫
Vue.js 為兩個最為常用的指令提供了特別的縮寫：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
我們也可以使用 v-show 指令來根據條件展示元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
</body>
</html>
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源資料陣列並且 site 是陣列元素迭代的別名。
v-for 可以繫結資料到陣列來渲染一個列表：
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
computed setter
computed 屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
<div id="app">
<p>原始字串: {{ message }}</p>
<p>計算後反轉字串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 例項
return this.message.split('').reverse().join('')
}
}
})
</script>
可以說使用 computed 效能會更好，但是如果你不希望快取，你可以使用 methods 屬性。
.class的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
</body>
</html>