CDN方式开发vue项目步骤：
1.cdn 链接相关css(element-ui.css, common.css), js(jq ,vue.js, element-ui.js, common.js) 等
2.每个页面嵌入 下列相关内容
<div id="app">
{{ 3.1415926 | number(2) }}
</div>
// 全局过滤器
Vue.filter("number", function(data){
return ....
})
new Vue({
el: "#app",
data: {},
methods: {
fun1(){},
fun2: function(){}
},
filters: {
number: function(data,n){
return data.toFixed(n);
}
}
});3.代码优化 ：相关js可以提出 写在js文件内，与html区别开
4.相关项目练习代码如下所示：
* event: 传参 $event
取消冒泡：e.stopPropagation()；
取消默认行为：e.preventDefault(); 或者 @click.prevent.stop="open()" // 如取消a链接的跳转行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue cdn</title>
<link rel="stylesheet" href="../libs/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24"><div class="grid-content">
<a href="https://yulegh.github.io/vue-element-test/index.html">cdn 项目demo地址</a>
<a href="javascript:;" @click="openGitHub">open GitHub</a>
</div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple">
<el-menu :default-active="activeIndex">
<template v-for="firstMenu in menus">
<el-menu-item :index="firstMenu.id" @click="open(firstMenu.url)" v-if="firstMenu.children==undefined">
<i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}
</el-menu-item>
<el-submenu :index="firstMenu.id" v-else>
<template slot="title"><i :class="firstMenu.iconClass" ></i>{{ firstMenu.name }}</template>
<el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
<!-- <template slot="title">{{ secondMenu.name }}</template> -->
<!-- <el-menu-item :index="secondMenu.id" @click="open(secondMenu.url)">{{ secondMenu.name }}</el-menu-item> -->
<el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id"
:key="thirdMenu.id" @click="open(thirdMenu.url)">{{ thirdMenu.name }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</template>
</el-menu>
</div></el-col>
<el-col :span="20"><div class="grid-content bg-purple-light">
<iframe :src="iframeUrl" frameborder="0"></iframe>
</div></el-col>
</el-row>
</div>
<script src="../libs/jquery.js"></script>
<script src="../libs/element-ui/lib/vue.js"></script>
<script src="../libs/element-ui/lib/index.js"></script>
<script src="../js/menus.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
activeIndex: "aboutme",
aboutMeUrl: "aboutme.html",
iframeUrl: "aboutme.html",
menus: menus
},
methods: {
open(url){
console.log(url)
this.iframeUrl = url;
},
openGitHub(){
window.open("https://github.com/yuleGH", "_blank");
}
}
});
</script>
</body>
</html>
上面html页面js可提出：
index.js：
new Vue({
el: "#app",
data: {
activeIndex: "aboutme",
aboutMeUrl: "aboutme.html",
iframeUrl: "aboutme.html",
menus: menus
},
methods: {
open(url){
console.log(url)
this.iframeUrl = url;
},
openGitHub(){
window.open("https://github.com/yuleGH", "_blank");
}
}
});aboutme.js
new Vue({
el: "#app",
data: {
dialogVisible: false
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
});menu.js
var menus = [
{
name: "关于我",
id: "aboutme",
iconClass: "el-icon-aboutme",
url: "aboutme.html"
},
{
name: "测试页",
id: "test",
iconClass: "el-icon-test",
url: "test.html"
},
{
name: "测试页2",
id: "test2",
iconClass: "el-icon-test",
url: "https://www.baidu.com"
},
{
name: "测试页3",
id: "test3",
iconClass: "el-icon-test",
url: "https://www.toutiao.com/"
},
{
name: "时间控件",
id: "date",
iconClass: "el-icon-time",
children: [
{
name: "DatePicker 日期选择器",
id: "DatePicker",
children: [
{name: "年月日时分", id: "DatePicker-demo1", url: "date/demoElDatePicker.html"},
{name: "多日期选择", id: "DatePicker-mutidemo", url: "date/demoMultipleDate.html"}
]
}
]
},
{
name: "Form",
id: "form",
iconClass: "el-icon-edit-outline",
children: [
{
name: "Input",
id: "input",
children: [
{name: "小写转大写", id: "input-demo1", url: "form/demoUpper.html"}
]
},
{
name: "validateRules",
id: "validateRules",
children: [
{name: "动态修改校验规则", id: "validateRules-demo", url: "form/validateRules.html"}
]
}
]
}
]5.效果图如下所示：
6.监听
<div id="app">
{{ 3.1415926 | number(2) }}
</div>
var vm = null;
windoe.onload = function(){
vm = new Vue({
el: "#app",
data: {
age: "",
name: "",
obj: {
value: "",
name: ""
}
},
watch: {
age: function(newValue, oldValue){
console.log("监听年龄修改")
},
name: function(newValue, oldValue){
console.log("监听姓名修改")
},
obj: {
handler: (newValue, oldValue) => {
console.log("obj 属性监听");
},
// deep: true 表示监听对象的属性变化，执行handler,获取newValue
// deep: false 关闭监听，看不到属性变化，不执行handler. 数组无需此设置
deep: true,
},
}
methods: {
fun1(){},
fun2: function(){}
}
});
}
// 全局监听
Vue.$watch("number", function(data){
return ....
})
7.属性获取
<div id="app">
{{ 3.1415926 | number(2) }}
</div>
var vm = null;
windoe.onload = function(){
vm = new Vue({
el: "#app",
data: {
age: "",
name: "",
obj: {
value: "",
name: ""
}
},
name: "aaaa",
methods: {
fun1(){},
fun2: function(){}
}
});
}
8.手动挂载Vue实例
vm.$mount("app");
new Vue({}).$mount("app");9.属性增删改
<div id="app">
{{ 3.1415926 | number(2) }}
</div>
var vm = null;
windoe.onload = function(){
vm = new Vue({
el: "#app",
data: {
age: "",
name: "",
obj: {
value: "",
name: ""
}
},
name: "aaaa",
methods: {
add(){
// this.obj.age = 12; 无效
this.$set(this.obj,"age",12);
},
del: function(){
this.$delete(this.obj,"age");
},
update(){
this.obj.age = 20;
}
}
});
}10.指令+指令生命周期
<div id="app">
<input v-focus>
<p v-hello>12</p>
<p v-hello:wds>12</p>
<p v-hello2>12</p>
</div>
var vm = null;
windoe.onload = function(){
vm = new Vue({
el: "#app",
data: {
age: "",
name: "",
obj: {
value: "",
name: ""
}
},
name: "aaaa",
methods: {},
direactives: {
focus: {
inserted(el){ el.focus(); // 页面打开输入框即获得焦点 },
}
}
});
}
Vue.directive('hello',{
bind(el, binding){},
insert(){}
});
Vue.directive('hello2',{
bind(el, binding){},
inserted(){},
update(){}
});
11.组件
全局写法：
局部组件：有独立data数据
组件引入：
组件套指令：
<templete id="myaddress">
<input v-focus/>
....
</templete>
<body>
<myaddress ></myaddress>
</body>12.组件中is的使用：不建议使用
直接正常组件引入<my-row></my-row> 此种写法，展示tbody并没有写入table中，甚至有时候解析出错或者解析不出来。
13.slot内容分发，嵌套使用
14.动态模板
方法1：v-if
方法2：is flag 值与组件名必须统一
15.keep-alive: 缓存非活动组件
button按钮点击切换组件，随机数第一次更新后不再变化，只更新一次。
若是去掉keep-alive，点击一次按钮就会更新一次随机数
16.父子组件通信：父包含子组件
子 --> 父 传值发射：
父接收广播：
17.axios数据请求get，post, 以及发送请求数据格式处理：
