使用CDN
COPYhttps://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js
https://cdn.bootcss.com/vue/2.5.21/vue.min.js
COPY<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
COPY<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app", #绑定元素
data:{ #数据操作
message: "hello,vue!"
}
});
</script>
</body>
</html>
COPY<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<h1 v-if="ok">YES</h1>
<h1 v-else>NO</h1>
<li v-for="item in items">
{{item.msg}}
</li>
<button v-on:click="sayHi">click me</button><br>
请输入: <input type="text" v-model="inputMsg">{{inputMsg}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "hello,vue!",
ok: true,
items: [
{msg: 'Himit_ZH真帅'},
{msg: 'Himit_ZH真厉害'},
],
inputMsg: ""
},
methods: { //vue方法必须定义在这里面
sayHi: function () {
alert(this.message);
}
}
});
</script>
</body>
</html>
COPY<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--给模板组件传值,把值赋给titem,方便vm调用-->
<hcode v-for="item in items" v-bind:titem="item"></hcode>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script>
//自定义标签 模板组件
Vue.component("hcode",{
/*通过props获取*/
props: ['titem'],
template: '<li>{{titem}}</li>'
})
var vm = new Vue({
el: "#app",
data:{
items: [
'Himit_ZH真帅',
'Himit_ZH真厉害',
],
},
});
</script>
</body>
</html>
COPY<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*解决闪烁问题*/
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
<div>{{info.name}}</div>
<li v-for="tag in info.tag">{{tag}}</li>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data(){
return{
//请求的返回参数格式必须和json字符串一样
info:{
name: null,
tag: [],
}
}
},
mounted(){ //钩子函数
axios.get('data.json').then(response=>(this.info=response.data))
},
computed:{ //计算属性:methods和computed方法名不能重复,重名只调用methods,用于不经常变化的属性,类似缓存
}
});
</script>
</body>
</html>
首先得有npm工具,这个可以一键下载nodejs,会自带npm工具。
COPYnpm install webpack
npm install webpack-cli
COPYexports.sayHi = function () {
document.write("<h1>hcode</h1>")
}
COPYvar hello =require("./hello");
hello.sayHi();
COPYmodule.exports = { //导出生成
entry: './modules/main.js', //引入主模块js
output: {
filename: "./js/bundle.js" //生成js的路径
}
};
在本目录使用命令 webpack
最后便会在本目录生成一个dist文件夹 里面就会有js/bundle.js,一个压缩好的可以调用的js。
COPY!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!})},n.t=function(e,t){if(&t&&(e=n(e)),&t)return e;if(&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!,value:e}),&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=)}([function(e,t,n){n().sayHi()},function(e,t){t.sayHi=function(){document.write("<h1>hcode</h1>")}}]);
COPY<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
vue init webpack 项目名
npm install
安装项目所需的依赖如果创建vue项目没有选择下载的话,就在vue项目的根目录使用cmd命令导入
COPYnpm install vue-router --save-dev
Content.vue
COPY ```html
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
```
Main.vue
COPY ```
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
```
COPYimport Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content"; //导入组件
import Main from "../components/Main"; //导入组件
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes: [
{
//路由路径
path: '/content',
//跳转的组件
component: Content,
//组件名
name: 'content'
},
{
path: '/main',
name: 'main',
component: Main
}
]
});
最后配置main.js
COPY import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router' //自动扫描路由配置
Vue.config.productionTip = false
Vue.use(VueRouter); //显示声明
new Vue({
el: '#app',
//配置路由
router, //配置
components: { App },
template: '<App/>'
})
COPYnpm run dev
官网:https://element.eleme.cn/#/zh-CN/component/installation
进入Vue项目目录,用CMD执行下面的命令下载
COPYnpm i element-ui -S
安装SASS加载器
COPYcnpm install sass-loader node-sass --save-dev