Vue增强
Vue事件
-
语法
-
<标签 v-on:实践句柄=“表达式或者事件处理函数"></标签>
注意事项 : 事件处理函数作为事件句柄的值不需要调用.
-
简写方式：<标签 @事件句柄=”表达式或者事件处理函数"></标签>
-
内联事件处理函数(了解) 语法: 使用v-on指令注册事件 <标签 v-on:事件句柄="内联函数(实际参数)"></标签> 简写方式 <标签 @事件句柄="内联函数(实际参数)"></标签> 注意事项: 内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数 <div id="app"> <button v-on:click="say('hello')">hello</button><br/> <button @click="say('hi')">hi</button><br/> </div> var app = new Vue({ el: "#app", data: { }, methods:{ say:function(message){ //this指向当前vue对象：app console.log(message); //this当前vue对象 console.log(this); //获取事件源 // 获取触发事件 event // 通过事件获取事件源 console.log(event.target); } } });
-
计算属性&&watch
computed代码：
<div id="app">
<h1>您的生日是：{{birth}} </h1>
</div>
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
watch代码：
<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>
Vue组件
-
什么是组件（组件是用来完成特定功能的一个自定义的HTML标签）
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。
-
组件的作用（组件中的template属性”可以是模版的标签id的属性值“）
模版标签<template id=""></template>或者<script type="text/template" id=""></script>_组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. _
全局组件：
<div id="app">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<div id="app1">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++====
//定义第一个全局组件
Vue.component("mycomponent1",{
template : "<h1>这是第一个全局组件</h1>"
})
//定义第二个全局组件
var component2Config = {
template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);
var app = new Vue({
el: "#app",
data: {
}
});
var app1 = new Vue({
el: "#app1",
data: {
}
});
局部组件：(局部组件只能够在所挂载的标签中使用)
语法：
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象},
"局部组件的名字2" : {组件的配置对象}
}
});
-
组件中的数据必须是函数
注意事项：
- data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
- 只能够在各自的组件模板中使用各自的组件中的data数据
- Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.
// 模版 components:{ "mycomponent1":{ // "template":"#templateStr1" "template":"#templateStr2", //模板是定义数据以下是可行的 //1 必须是函数 //2 通过return返回数据对象 //3 如果有多个数据就是对象对象多个属性及值 data(){ return { messaage:"jjjj", yhptest:"xxxxxxxxxxxxxx" } }
Vue-router
-
什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>10_vue路由.html</title> <script src="node_modules/vue/dist/vue.js" type="text/javascript"></script> <script src="node_modules/vue-router/dist/vue-router.js" type="text/javascript"></script> </head> <body> <!-- 步骤分析： 1 下载vue-router npm i vue-router 2 导入进入 <script src="node_modules/vue-router/dist/vue-router.js" 3 定义路由 3.1 定义路由所需要组件 3.2 定义路由规则-哪个地址跳转到哪个组件 3.3 通过路由规则定义路由 4 把路由挂载到vue实例 5 显示 5.1 定义显示区域 5.2 超链接跳转-通过超链接地址和路由规则可以找到组件，把组件渲染到显示区域 --> <div id="myDiv"> <!--5.2 超链接跳转--> <router-link to="/index">首页</router-link> <router-link to="/product">产品</router-link> <router-link to="/about">关于我们</router-link> <!--5.1 定义显示区域--> <router-view></router-view> </div> <script type="text/javascript"> // 3.1 定义路由所需要组件 let index = Vue.component("index",{ template:"<h3 style='color: red' οnclick='alert(1)'>index</h3>" }) let product = Vue.component("product",{ template:"<h3 style='color: pink' οnclick='alert(3)'>product</h3>" }) let about = Vue.component("about",{ template:"<h3 style='color: yellow' οnclick='alert(2)'>about</h3>" }) //3.2 定义路由规则-哪个地址跳转到哪个组件 const routes = [ {path:"/index",component:index}, {path:"/product",component:product}, {path:"/about",component:about} ] //3.3 通过路由规则定义路由 const router = new VueRouter({ //routes:routes(定义的路由规则跟routers属性一致时，可以省略) routes //等价于上面那一句，根据同名原则匹配 }) new Vue({ el:"#myDiv", data:{ }, methods:{ }, //4 把路由挂载到vue实例 //router:router(定义的路由跟router属性一致时，可以省略) router //等价于上面那一句，根据同名原则匹配 }); </script> </body> </html>
webpack 打包
-
为什么需要打包
-
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
-
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
-
- 将代码打包的同时进行混淆，提高代码的安全性
-
-
**Webpack 是一个前端资源加载/打包工具**它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
