vue快速入門一

官網：版本1：

版本2：

1. 建立專案：初始化 npm init --> package.json

, "author": "", "license": "isc", "devdependencies":

}

2. 配置 webpack.config.js

webpack配置：

const path = require('path');
const vueloaderplugin = require('vue-loader/lib/plugin')
const minics***tractplugin = require('mini-css-extract-plugin')
module.exports = ,
module: }},
}]}}},
,},
'css-loader',],}
]},plugins: [
// make sure to include the plugin for the magic
new vueloaderplugin(),
new minics***tractplugin()
],resolve: 
},watch : true
}

1. index.html

2. main.js

import vue from "vue";
var vm = new vue(,
methods :  。 因為箭頭函式裡面的this指向類而不是例項。
add : function()
},computed: 
}});

v-model    //雙向資料繫結
v-on:keyup.enter="add()"
v-on:click="remove()"
}- }
v-html
v-bind:src=""       
v-if        //在 元素上使用 v-if 條件渲染分組
v-else
v-else-if
v-show
v-for
//陣列更新檢測
vm.$set(vm.items, indexofitem, newvalue)
this.arr.$set(1,"么雞");

beforecreate 初始化前 created 初始化 beforemount 掛載前 mounted 掛載 beforeupdate 更新前 updated 更新 beforedestroy 銷毀前

destroyed 銷毀

//1. 元件的基本使用
// 建立乙個元件構造器
var mycompo = vue.extend();
// 註冊全域性，要確保在初始化根例項之前註冊了元件。
vue.component("my-compo",mycompo);
// 註冊區域性
var vm = new vue(
});//2. 快捷建立元件
// 快捷建立乙個全域性元件
vue.component("my-compo2",);
//快捷建立乙個區域性元件
var mycompo = vue.extend(
}});//3. 元件中的data/method/computed
import vue from "vue";
const mycompo = vue.extend(
},methods : 
},computed : 
}});export default mycompo;

元件中的資料傳遞

props

1. index.html

2. rangebar.js

import vue from "vue";
export default vue.extend(}}
`,props : ["color" , "colorname" , "chinesename"]
});

3. main.js

import vue from "vue";
import rangebar from "./components/rangebar.js";
new vue(
},components : ,
methods : 
});

1. api

,,]
}

2. index.html


總價：}

3. cartbar.js

import vue from "vue";
const cartbar =  vue.extend(}}-}+
}`,
props : ["item"],
methods : ,
add : function(),
calc : function()
}});export default cartbar;

4. main.js

import vue from "vue";
import cartbar from "./components/cartbar.js";
new vue(,
mounted : function());
},components : ,
computed : );
return sum;}}
});

vue快速入門

一什麼是 vue vue 是乙個用於構建使用者介面的漸進式的js框架，vue 的核心是mvvm雙向資料繫結模式及元件化開發，它使得開發前端不僅易於上手，還便於與vue的優良生態或既有專案整合。二快速開始 1.在頁面引入vue的js檔案即可。注意 cdn是一種加速策略，能夠快速的提供js檔案 2....

vue快速入門

vue快速入門 4

每個 vue 應用都是通過用vue函式建立乙個新的vue 例項開始的 var vm new vue 在建構函式中傳入乙個物件，並且在物件中宣告各種vue需要的資料和方法，包括等等接下來我們一一介紹。每個vue例項都需要關聯一段html模板，vue會基於此模板進行檢視渲染。我們可以通過el屬性來...

vue快速入門一

vue快速入門

vue快速入門

vue快速入門 4

相關推薦