VUE----整理
-------------------------------------------------------------------VUE-----------------------------------------------------------------------
1：VUE是一個構建用戶界面的JS框架,是一套用於構建用戶界面的漸進式框架。
2:與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。
3:Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。
4:另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。
var app = new Vue({ -----------------------------------聲明
el:"#app01"-------------------------------------------綁定標籤
data:{------------------------------------------------數據
}
methods：function(){-----------------------------------事件
}
computed：{--------------------------------------------計算屬性
}
})
Vue.component('組件名'{-------------------------------------組件
data:function(){
return " "------------------------------------------必定要有返回值
}
})
雙向綁定：v-model指令實現,它能輕鬆實現表單輸入和應用狀態之間的雙向綁定.
變量提高：
ES6(ECMAScript):-----------------------------es:EMCAScript 6 (es2015)-----------Emca:國際標準組織
ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現（另外的ECMAScript方言還有Jscript和ActionScript）。平常場合，這兩個詞是能夠互換的。
1:常量和變量-----------------const，let，var
let---------------------------------局部生效,定義一個塊級做用域的變量，
須要先定義再使用；(不存在變量提高),不能重複定義，
let聲明的變量只在它所在的代碼塊有效。
const-------------------------------常量，只讀。
var---------------------------------全局生效,有變量提高現象(先使用，後定義)，重複定義會被覆蓋。
例一：
{
const c = "hello 個屁！";
let a="wsl";
var b="Hello";
console.log(a);
console.log(b);
console.log(c)
}
例二：
let b = "不回";
if (10>9){
let b = "回家過年！";
console.log(b)
}
例三：
{
let d = 500;
d = 1000;
console.log(d)
}
例四：--------計數器i只在for循環體內有效，在循環體外引用就會報錯。
for (let i = 0;i<10;i++){
console.log(i);
}
例五：--------變量i是var聲明的，在全局範圍內都有效。因此每一次循環，新的i值都會覆蓋舊值，致使最後輸出的是最後一輪的i的值。若是使用let，聲明的變量僅在塊級做用域內有效，最後輸出的是6。
{
var a = [];
for (var i=0;i<10;i++){
a[i] = function(){
console.log(i);
};
}
a[6]();
}
---------------------------------
{
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
}
例六：--------var，定義屢次覆蓋現象‘
const obj = {
name: "謝小二",
age: 22
}
var obj2 = obj;
obj2.age = 90
console.log(obj.age);
js的數據類型：-----------字符串(string), 數組(array), 數字(number), 未定義的(undefined), 布爾(boolean), object, null
基本數據類型：-----------字符串(string), 數字(number), 布爾(boolean), 布爾(boolean), 布爾(boolean)
引用類型：---------------數組(array) object
2:模板字符串-----------------經過反引號來使用，字符串當中可使用變量，能夠看成普通字符串來處理，可使用多行字符串
例一：------------------------------
let name = `悟空`;
console.log(`誰的名字叫${name}`);
例二：----------------------------- document.getElementById("list_1").innerHTML--------------插入標籤。
<ul id="list_1">
</ul>
<script>
let name = `悟空`;
console.log(`誰的名字叫${name}`);
document.getElementById("list_1").innerHTML = `
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
`
</script>
3:解構變量-------------------數組解構賦值：-------------------------把數據元素的值依次地賦給變量。
例一：
{
let arr = [10,20];
let a = arr[0];
let b = arr[1];
console.log(a);
console.log(b)
}
例二：
{
let [a,b,[c,[d]]] = [100,200,[300,[4000]],];
console.log(a);
console.log(b);
console.log(c);
console.log(d) ;
}
例三：
{
let obj = {
"name":"悟空",
"age":20,
};
let{name,age} = obj
console.log(name)
console.log(age)
}
例四：
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
4:對象的擴展-----------------容許直接寫入變量和函數，做爲對象的屬性和方法,(對象當中的屬性能夠簡寫,對象當中的方法也能夠簡寫)
例一：
{
let username = "悟空";
let obj = {
username,
fun(){
alert('過年回家！')
}
};
console.log(username,obj);
console.log(obj.username);
obj.fun()
}
例二：------------------------------屬性名爲變量名, 屬性值爲變量的值
{
function f(x, y) {
return {x, y};
}
// 等同於
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2
}
例三：
var birth = '2000/01/01';
var Person = {
name: '張三',
//等同於birth: birth
birth,
// 等同於hello: function ()...
hello() { console.log('個人名字是', this.name); }
};
5:函數的擴展-----------------在ES6以前，不能直接爲函數的參數指定默認值，只能採用變通的方法。---能夠給函數默認參數，剩餘參數：function fun(a,...b ){}fun(11,22,33)則：b = [22,33]
例一：------------------------------給函數指定默認參數
function fun(x=100){
alert(x);
}
fun()
例二：------------------------------將剩餘參數打包(...xx),至關於python的*args和**kwargs
function fun2(x=500,...y){
console.log(x);
console.log(y);
}
fun2(x=100,y=40,z=500)
}
6:數組的擴展
(1):判斷數組當中是否存在某個數值
例一：
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
// console.log(value)
// console.log(index)
});
var arr2 = arr.map(function(value,index){
return value+1
});
console.log(arr.indexOf(1000));
console.log(arr.includes(201))
}
// console.log(arr2)
(2):對數組的遍歷--------------------forEach
例一:---------------------------對數組遍歷
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
console.log(value)
console.log(index)
})
}
例二：--------------------------對遍歷後的數組，再進行處理。
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
console.log(value)
console.log(index)
});
var arr2 = arr.map(function(value,index){
return value+1
})
}
console.log(arr2)
例三：--------------------------循環遍歷
{
let arr3 = [11,22,33,44,55,66]
for (i in arr3){
console.log(i);
console.log(arr3[i])
}
(3):對數組的過濾--------------------filter
{
var arr = [10,20,30,40,50];
var arr4 = arr.filter(function (value,index) {
return value>20
});
console.log(arr4)
}
7：類的擴展。
7：箭頭函數：
var f = a =>a
----------------------
var f = function(a){
return a;
}
f(1)
1：使用：
(1):引入-------------------------vue.js
<script src=vue.js></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
(2):展現html
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
(3)：創建vre對象
new Vue({
el: "#app", //表示在當前這個元素內開始使用VUE
data:{
msg: ""
}
})
2：聲明形式渲染:-----------------------------Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統,{{}}， 裏面能夠放表達式
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
3:指令:--------------------------------------是帶有V-前綴的特殊屬性，經過屬性來操做元素
1: v-text:----------------------------在元素當中插入值
<div id='add'>
<p v-text="arr"></p>
</div>
<script>
new Vue({
el: "#add",
data: {
arr:"森納那亞克",
}
})
</script>
2: v-html:----------------------------在元素不中不只能夠插入文本，還能夠插入標籤
<div id='a1'>
<p v-text="crr"></p>
</div>
<script>
new Vue({
el: "#a1",
data: {
crr:'<input type="button">',
}
})
</script>
3: v-if:------------------------------根據表達式的真假值來動態插入和移除元素,若狀態爲flase,將標籤註釋。
<div id="spp">
<p v-if="msg">aaaaa</p>
<p v-else>bbbbbbbbb</p>
</div>
<script>
new Vue({
el: "#spp",
data: {
arr:True,
}
})
</script>
4：v-show:----------------------------根據表達式的真假值來隱藏和顯示元素
<div id="spp">
<p v-show="msg">認真學，刻苦練！</p>
</div>
<script>
new Vue({
el: "#spp",
data: {
msg:True,
}
})
</script>
5：v-for:-----------------------------根據變量的值來循環渲染元素
<div id="spp">
<ul>
<li v-for="(item,index) in msg">{{item}}:{{index}}</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj">{{item}}:{{key}}:{{index}}</li>
</ul>
<ul>
<li v-for="item in arr">{{item.username}}{{item.age}}{{item.sex}}</li>
</ul>
</div>
<script>
new Vue({
el: "#spp",
data: {
msg: ['星期一', '星期二', '星期三', '星期四', '星期五', '放假'],
obj: {a: "老虎", b: "獅子", c: "獵豹", d: "大象"},
arr:[
{"username":"悟空"},
{"age":10000},
{"sex":"male"}
]
}
});
</script>
6: v-on:------------------------------監聽元素事件，並執行相應的操做<!-- 完整語法 --><a v-on:click="doSomething">...</a><!-- 縮寫 --><a @click="doSomething">...</a>
例1：
<div id="spp">
<ul>
<li v-for="item in aa">{{item}}</li>
</ul>
<input type="button" value="點我你試試" @click="show()">
</div>
<script>
new Vue({
el: "#spp",
data: {
aa:[11,22,33,44,55,66,77,88,99],
},
methods: {
show: function () {
this.aa.pop();
}
}
}
)
</script>
例2:
<div id="app4">
<p>{{masge}}</p>
<button v-on:click="dian">逆轉消息</button>
</div>
<script>
var app4 = new Vue({
el:"#app4",
data:{
masge:"wang,shang,Long"
},
methods:{
dian:function () {
this.masge = this.masge.split(',').reverse().join('')
}
}
})
</script>
7: v-bind:----------------------------綁定元素的屬性來執行相應的操做---完整語法<a v-bind:href="url">...</a> --縮寫<a :href="url">...</a>
例1：跳轉
<div id="spp">
<a :href="url">試試就試試</a>
</div>
<script>
new Vue({
el: "#spp",
data: {
url:"https://www.baidu.com/",
},
}
})
</script>
例2：懸浮提示信息-----------------將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致」。
<div id="app_1">
<span v-bind:title="message">
鼠標懸停幾秒查看此處動態綁定的提示信息！
</span>
</div>
<script>
var app1 = new Vue({
el:"#app_1",
data:{
message:'頁面加載與' + new Date().toLocaleString()
}
})
</script>
8: v-model:---------------------------實現了數據和視圖的雙向綁定：--把元素的值和數據相綁定，當輸入內容時，數據同步發生變化，視圖是---------數據的驅動當改變數據時，輸入內容也會發生變化,數據是------視圖的驅動
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
<input type="submit" value="變" @click="change">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"掙錢！"
},
methods:{
change:function () {
this.msg="掙個屁！"
}
}
})
</script>
9: 取反-------------------------------!,經過不停改變狀態，實現閃爍
div id="spp">
<p v-show="msg">認真學，刻苦練！</p>
</div>
<script>
var vm = new Vue({ //起個別名
el: "#spp", //表示使用uve
data: {
msg: true
}
});
window.setInterval(function () {
vm.msg = !vm.msg; //取反
}, 1000) //間隔秒數
</script>
10：自定義指令：----------------------directives：{指令名：{.......}}
<div id="app">
<input type="text" v-focus>
</div>
<script>
new Vue({
el:"#app",
data:{},
directives:{ //自定義指令
focus:{ //自定義指令的名字
inserted:function (tt) { //當綁定的元素顯示時
tt.focus();
tt.style.backgroundColor="blue";
tt.style.color="#fff";
}
}
}
})
</script>
4:計算屬性：----------------------------------computed，模板內的表達式很是便利用於簡單運算的。放入太多的邏輯會讓模板太重且難以維護。
-----------------------------------因此，對於任何複雜邏輯，你都應當使用計算屬性。
計算屬性：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
計算屬性緩存 vs 方法：-------------每當觸發從新渲染時，調用方法將總會再次執行函數
兩種方式的最終結果確實是徹底相同的。
然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。
計算屬性只有在它的相關依賴發生改變時纔會從新求值。
這就意味着只要 message 尚未發生改變，
屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。
例：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
計算屬性 vs 偵聽屬性：-------------watch
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性。
當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用 watch——
特別是若是你以前使用過 AngularJS。
然而，一般更好的作法是使用計算屬性而不是命令式的 watch 回調。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代碼是命令式且重複的。將它與計算屬性的版本進行比較：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
計算屬性的setter-------------------計算屬性+方法
計算屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter ：
例：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
如今再運行 vm.fullName = 'John Doe' 時，
setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。
5:偵聽器--------------------------------------watch,當須要在數據變化時執行異步或開銷較大的操做時
雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。
這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。
當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。
例：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 由於 AJAX 庫和通用工具的生態已經至關豐富，Vue 核心代碼沒有重複 -->
<!-- 提供這些功能以保持精簡。這也可讓你自由選擇本身更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 若是 `question` 發生改變，這個函數就會運行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一個經過 Lodash 限制操做頻率的函數。
// 在這個例子中，咱們但願限制訪問 yesno.wtf/api 的頻率
// AJAX 請求直到用戶輸入完畢纔會發出。想要了解更多關於
// `_.debounce` 函數 (及其近親 `_.throttle`) 的知識，
// 請參考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>
6：組件化應用構建：--------------------------組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型。
組件基礎：-------------------------------Vue.component('組件名',{data:function(){return{}},template:'組件html'})
1：在 Vue 裏，一個組件本質上是一個擁有預約義選項的一個 Vue 實例。在 Vue 中註冊組件很簡單：：：
Vue.component('todo-item', {-------------------------------定義名爲 todo-item 的新組件
template: '<li>這是個待辦項</li>'
})
2：如今你能夠用它構建另外一個組件模板：
<ol>
<todo-item></todo-item>----------------------------------建立一個 todo-item 組件的實例
</ol>
3：咱們應該能從父做用域將數據傳到子組件纔對。讓咱們來修改一下組件的定義，使之可以接受一個 prop：
Vue.component('todo-item', {-------------------------------todo-item 組件如今接受一個
props: ['todo'],-----------------------------------------"prop"，相似於一個自定義特性。這個 prop 名爲 todo。
template: '<li>{{ todo.text }}</li>'
})
4：如今，咱們可使用 v-bind 指令將待辦項傳到循環輸出的每一個組件中：
模板：
<div id="app-7">
<ol>
如今咱們爲每一個 todo-item 提供 todo 對象todo 對象是變量，即其內容能夠是動態的。咱們也須要爲每一個組件提供一個「key」
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
自定製組件：
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
參數：
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})
Vue.component('組件名',{data:function(){return{}},template:'組件html'})-----------------建立組件
---------------------------使用組件---------------------------------------------
<div id="app">
<Vheader></Vheader>
<Vheader></Vheader>
</div>
---------------------------引用js------------------------------------------------
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
---------------------------組件的建立--------------------------------------------
Vue.component('Vheader',{-------------------------建立組件，組件名
data:function(){-------------------------------數據，必定是函數 必需要有返回值，必需要return 哪怕是空對象
return {
}
},
template:`<div class="header">------------------組件樣式
<div class="w">
<div class="w-l">
<img src="./logo.png"/>
</div>
<div class="w-r">
<button>登陸</button><button>註冊</button>
</div>
</div>
</div>`
})
---------------------------Vue---------------------------------------------------
var app = new Vue({
el:'#app',
data:{
},
computed:{
},
methods:{
}
})
7:vue解決跨域:--------------------------------axios
前端
1:下載--------------------------------npm install axios
2：main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//-------在vue的全局變量中設置了 $axios=axios,之後每一個組件使用時：this.$axios------------------------
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;
axios.defaults.headers['Content-Type'] = 'application/json'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
後端：
cors.py:
class MiddlewareMixin(object):
def __init__(self, get_response=None):
self.get_response = get_response
super(MiddlewareMixin, self).__init__()
def __call__(self, request):
response = None
if hasattr(self, 'process_request'):
response = self.process_request(request)
if not response:
response = self.get_response(request)
if hasattr(self, 'process_response'):
response = self.process_response(request, response)
return response
class CORSMiddleware(MiddlewareMixin):
def process_response(self,request,response):
# 添加響應頭
# 容許你的域名來獲取個人數據
response['Access-Control-Allow-Origin'] = "*"
# 容許你攜帶Content-Type請求頭
# response['Access-Control-Allow-Headers'] = "Content-Type"
# 容許你發送DELETE,PUT
# response['Access-Control-Allow-Methods'] = "DELETE,PUT"
return response
setting.py:
配置
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'......'
'luffy.cors.CORSMiddleware',
]
外加配置版本設置
REST_FRAMEWORK = {
'DEFAULT_RENDERER_CLASSES':['rest_framework.renderers.JSONRenderer','rest_framework.renderers.BrowsableAPIRenderer',],
'DEFAULT_VERSIONING_CLASS':'rest_framework.versioning.URLPathVersioning',
'ALLOWED_VERSIONS':['v1','v2'], # 容許的版本
'VERSION_PARAM':'version', # 參數
'DEFAULT_VERSION':'v1', # 默認版本
}
搭建腳手架：
vue-cli是vue.js的腳手架,用於自動生成vue.js工程模板的.
安裝以及使用步驟：
安裝。 npm install vue
全局安裝----------------------------------------------------npm install vue-cli -g或者cnpm install vue-cli -g
查看是否安裝成功--------------------------------------------vue -V(大寫的V)
--------------------------------------------vue list
使用
生成項目名是wsw的模板-----------------------------------vue init webpack wsw
進入項目並安裝依賴-------------cd wsw ------------------npm install
運行----------------------------------------------------npm run dev
組件的使用：
模塊：
使用jQ:
1：安裝-------------------------------------npm install jquery --save
2：webpack配置
(1):在項目根目錄下的build目錄下找到webpack.base.conf.js文件，
在開頭使用如下代碼引入webpack，由於該文件默認沒有引用，
------var webpack = require('webpack')
(2)而後在module.exports中添加一段代碼，
----------原有代碼--------------------
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
**--------添加代碼---------------------
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],
---------原有代碼----------------------
module: {
rules: [
......
]
}
(3)而後許多其餘解決辦法到此就說在main.js裏導入就能夠了，然而題主照着作了。
main.js裏導入jQuery
import 'jquery'
在Vue組件裏使用 $ or jQuery 寫了操做dom的代碼
接着啓動項目
npm run dev
3:編譯報錯解決方法：
http://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined
(1)eslint檢查-----------------------------機智的朋友確定想到跟eslint有關，
這時候須要作的下一步就是要修改根目錄下.eslintrc.js文件了，
在改文件的module.exports中，爲env添加一個鍵值對 jquery: true 就能夠了，
也就是：
env: {
// 原有
browser: true,
// 添加
jquery: true
}
(2)npm run dev ，OK了，去組件裏試一下吧，console.log($('選擇器')) ，
你會發現成功使用jQuery獲取到了DOM。
使用bootstarp:
Sublime Text設置高可亮：
1:下載，解壓----------------https://github.com/vuejs/vue-syntax-highlight
2：打開---------------------進入sublime選擇菜單項「Preferences---->Browse Packages
3：建立---------------------建立vue文件夾
4：拷入---------------------在Vue文件夾中，將vue-syntax-highlight-master壓縮包解壓後的全部文件考入。
5：載入---------------------按下快捷鍵「ctrl+shift+p」，在打開的packages輸入框中輸入vue，
選擇「Set Syntax:Vue Component」進行加載。
6：重啓Sublime
node.js-----------------------------------以運行js的服務平臺，能夠當作值一門後端語言，它的開發語言是js[
python---------------本身建立服務
php------------------apache
java-----------------tomcat
node.js--------------express
安裝以及使用-----------------------------http://www.nodejs.en
特性：
1：非阻塞IO模型
2：事件驅動
運用場景：
高併發低業務
webpacck-----------------------------------是一個模塊管理器
能夠把ccs圖片當作模塊加載。
能夠把文件進行壓縮打包成一個js文件，減小html請求。
根據模塊之間的關係進行分析，按須要加載。
能夠安裝一些插件，對插件進行打包處理。
安裝以及使用：
npm install webpacck-g -------全局安裝。
練習：
1：tag切換
<div id="mybox">
<ul>
<li>
<span v-on:click="qh(true)">二惟碼登陸</span>
</li>
<li>
<span v-on:click="qh(false)">郵箱登陸</span>
</li>
</ul>
<div v-show="temp">
<img src="erma.jpg">
</div>
<div v-show="!temp">
<form action="http://mail.163.com" method="post">
<p><input type="email"></p>
<p><input type="password"></p>
<p><input type="submit" value="登陸"></p>
</form>
</div>
</div>
<script>
new Vue({
el: "#mybox",
data: {
temp: true
},
methods: {
qh: function (t) {
this.temp = t
}
}
})
</script>
2：動態生成html
<div id="pa">
<ul>
<li><input type="checkbox">日韓</li>
<li><input type="checkbox">歐美</li>
<li><input type="checkbox">國產</li>
<li><input type="checkbox" v-on:click="create()">其餘</li>
<li v-html="htmlstrs" v-show="af"></li>
</ul>
</div>
<script>
new Vue({
el:"#pa",
data:{
af:false,
htmlstrs:"<textarea></textarea>"
},
methods:{
create:function(){
this.af=!this.af
}
}
})
</script>
3:表格增刪改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
.tipbox{
width: 200px;
height:200px;
border: 1px solid cornflowerblue;
position: absolute;
background-color: #aaaaaa;
top: 200px;
left: 600px;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" placeholder="姓名" v-model="username">
<input type="text" placeholder="年齡" v-model="age">
<input type="button" value="增長" @click="add">
</div>
<div>
<table cellpadding="0" border="1">
<tr v-for="(item,index) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{index}}</td>
<td><input type="button" value="刪除" @click="del(index)"></td>
<td><input type="button" value="修改" @click="showBox(index)"></td>
</tr>
</table>
</div>
<div class="tipbox" v-show="isShow">
<p><input type="text" placeholder="姓名" v-model="m_username"></p>
<p><input type="text" placeholder="年齡" v-model="m_age"></p>
<p>
<input type="button" value="肯定" @click="save()">
<input type="button" value="取消" @click="cancel()">
</p>
</div>
</div>
<script>
new Vue({
el: "#app", //表示在當前這個元素內開始使用VUE
data:{
username: "",
age: "",
arr: [],
isShow:false,
m_username: "",
m_age: "",
n: 0
},
methods: {
add: function () {
this.arr.push({username:this.username,age: this.age});
console.log(this.arr);
},
del: function (index) {
this.arr.splice(index,1);
},
showBox: function (index) {
this.isShow = true;
this.n = index;
this.m_username = this.arr[index].username;
this.m_age = this.arr[index].age;
},
cancel: function () {
this.isShow = false
},
save: function () {
this.arr[this.n].username = this.m_username;
this.arr[this.n].age = this.m_age;
this.isShow = false
}
}
})
</script>
</body>
</html>
4:計算屬性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
5:切換音樂
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
/*margin: 0;*/
}
ul{
list-style: none
}
li{
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<div id="music">
<audio :src="currSong" autoplay="" controls="" @ended='nextSong'></audio>
<ul>
<li v-for='(item,index) in songs' @click='clickHandler(index)'>
<h3>歌名：{{item.name}}</h3>
<p>歌手：{{item.author}}</p>
</li>
</ul>
<button @click='addOneSong'>添加一首歌</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
var songs = [
{id:1,src:'./audios/1.mp3',name:"la la Land",author:'Ryan'},
{id:2,src:'./audios/2.mp3',name:"The Best of",author:'Skillof'},
{id:3,src:'./audios/3.mp3',name:"It My Life",author:'Bon'},
{id:4,src:'./audios/4.mp3',name:"Tender",author:'Blur'}
]
var music = new Vue({
el:'#music',
data:{
songs:songs,
currentIndex:0
},
methods:{
clickHandler(index){
// this.currentSong = this.songs[index].src;
this.currentIndex = index;
},
nextSong(){
// alert(1)
this.currentIndex++;
// this.currentSong = this.songs[this.currentIndex].src;
},
addOneSong(){
this.songs.push({id:5,src:'./audios/4.mp3',name:"Tender",author:'Blur'});
}
},
computed:{
currSong(){
console.log(11111);
return this.songs[this.currentIndex].src;
}
},
created(){
//一般都來作頁面的初始化
}
})
</script>
</body>
</html>
6：
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。