https://www.w3cschool.cn/vuejs/d9bu1js7.html 复习时多看看还是官方文档 https://cn.vuejs.org/v2/guide/instance.html
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。
实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，
当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./libs/vue-2.4.0.js'></script> </head> <body> <!--Vue实例所控制的这个元素区域 就是MVVM中的v --> <div id="app"> <p>{{msg}}</p><!--和art—template类似 不过这里直接msg就好 不用写上data.mes--> </div> <script> //而我们new出来的这个VM对象 就是MVVM中的 VM调度者 var vm=new Vue({ //创建一个Vue实例 el:'#app', //element元素 表示当前我们new出来的Vue实例 要控制页面上的哪个区域 //这里的data就是MVVM中的V 专门用来保存每个页面的数据的 data:{ //data属性中,存放的是el中要用到的数据 msg:'123' } //通过Vue提供的指令 很方便能把数据渲染到页面上 不再需要操作DOM元素 }) </script> </body> </html>
这是为什么可以直接上手用msg而不用加前缀data
除了这些数据属性，Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
插值表达式语法：{{}}
插值表达式是vue框架提供的【指令】
插值表达式中 不可以写代码片段 会报错 <!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> -->
'这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式，'
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性 <!-- <h1 :title="{{msg}}">娃哈哈</h1> -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- 字符串 --> <p>{{ str }}</p> <!--页面展示：字符串--> <p>{{ num + 'aaa'}}</p><!--页面展示：1aaa--> <p>{{ str.length }}</p> <!--页面展示：3--> <!-- 数值 --> <p>{{ num }}</p> <!--页面展示：1--> <p>{{ num+num1 }}</p> <!--页面展示：101--> <p>{{ num > num1 }}</p> <!--页面展示：false--> <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00--> <!-- boolean --> <p>{{ flag }}</p> <!--页面展示：true--> <!-- 数组 --> <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]--> <p>{{ arr[3] }}</p> <!--页面展示：4--> <!-- 对象 --> <p>{{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }--> <p>{{ obj.name }}</p> <!--页面展示：tom--> <!-- null/undefined/NaN --> <p>{{ arg1 }}</p> <!--页面展示：--> <p>{{ arg2 }}</p> <!--页面展示：--> <p>{{ arg3 }}</p> <!--页面展示：NaN--> <!-- 三目运算符 --> <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否--> </div> <script> new Vue({ el:"#app", data:{ str: '字符串', num: 1, num1:100, flag: true, arr: [1,2,3,4], obj:{ name:'tom', age:20 }, arg1: null, arg2: undefined, arg3: NaN } }) </script> </body> </html>
指令
1 <style> 2 [v-cloak]{ 3 display:none; 4 } 5 </style> 6 </head> 7 <body> 8 <div id="app"> 9 <!--使用v-cloak能够解决 差值表达式的闪烁问题 必须搭配style里的display:none--> 10 <p v-cloak>还有内容{{msg}}不被替换</p> 11 <h4 v-text='msg'> 12 <!--v-text默认是没有闪烁问题的自然不需要display属性 13 但是会覆盖掉元素中原本的内容 而v-cloak的差值表达式 只会替换掉自己的占位符--> 14 </h4> 15 <div v-html='msg2'></div> <!--v-html能将内容以html来表示 并且也是会覆盖元素里的内容--> 16 </div>
v-text和v-html: https://blog.csdn.net/qq_31070475/article/details/78479411 解释v-cloak 和 v-text: https://www.cnblogs.com/shibin90/p/10312969.html
v-clock / v-text /v-html / v-if / v-for / v-bind(:) / v-on(@) / v-model
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令(缩写为:)用于响应地更新 HTML 特性：
<a v-bind:href="url"></a>
另一个例子是 v-on 指令(缩写为@)，它用于监听 DOM 事件：
<a v-on:click="doSomething">
修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：
<a v-bind:href.literal="/a/b/c"></a>
绑定操作元素的class和style https://www.w3cschool.cn/vuejs/l1ud1js4.html
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
<input type="text" v-model="name" @keyup.enter="add()"><!--!!!!!!!这里达成了按回车键就能输入的效果 (add函数在methods里)-->
https://blog.csdn.net/fifteen718/article/details/80359844 keycode: 测试https://www.runoob.com/try/try.php?filename=tryjsref_event_key_keycode
按键修饰符:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
模板字符串:https://www.jianshu.com/p/8b263a6bde4d `${y}-${m}-${d} ${hh}:${mm}:${ss}`
Vue生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{ msg }}</h3> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('执行了show方法') } }, //生命周期函数==生命周期钩子==生命周期事件 //创建期间的生命周期函数 beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它 // console.log(this.msg) // this.show() // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化 }, created() { // 这是遇到的第二个生命周期函数 // console.log(this.msg) // this.show() // 在 created 中，data 和 methods 都已经被初始化好了！ // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作 }, beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中 // console.log(document.getElementById('h3').innerText) // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 }, mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 // console.log(document.getElementById('h3').innerText) // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动 }, //实例创建结束 // 接下来的是运行中的两个事件 运行期间的生命周期函数 beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】【数据更新了才可以进入到这个钩子函数 当然不可能在这个函数里更新数据 是只有才的关系】 //MVVM M:model V：view 就是model改变了 只有通过中间的VM 才能改变页面上的显示数据就是V 这里表达的是这时候还没通过VM呢 /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)点击按钮 看msg等于什么 后台=no 前台还是yes [当然页面显示会显示NO哈 那是因为早执行完了 所以只得通过在这个函数里console的形式来看看此时页面上到底是什么] console.log('data 中的 msg 数据是：' + this.msg) */ // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步 }, updated() { console.log('界面上元素的内容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 数据是：' + this.msg) //点击按钮 都是最新的NO了 // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 } // //销毁期间的生命周期函数 beforeDestroy() 和 destroy() }); </script> </body> </html>
计算属性：https://cn.vuejs.org/v2/guide/computed.html ('对于任何复杂逻辑，你都应当使用计算属性。模板中不适合放太长的语句')
(在computed里可以定义一些属性 叫做计算属性(fullName) 计算属性的本质是一个方法(:function(){})
只是在使用计算属性的时候 我们把它的名称拿过来当做属性在使用<input v-model='fullName'>--把fullname当做了属性 如果是方法的话是要fullname()
如果计算属性中的任何值发生了变化 计算属性都会重新赋值重新调用 它的求值结果会被缓存起来 方便下一次利用 如果计算属性中的值没有一个重新变化 那么计算属性不会被调用)
<div id="app"> <p>{{msg | msgreplace}}</p> <!--{{vm.data中的信息 | 过滤的函数方法名}}--> <br> <p>{{msg | msgreplace2('疯狂','crazy')}}</p> <br> <p>{{msg | msgreplace |test }}</p> </div> <script> //定义一个全局过滤器 Vue.filter(过滤的函数方法名，函数) //过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。 Vue.filter('msgreplace', function (msg) { //是一定会有参数的 //第一个参数使用了正则 当然也可以是字符串 return msg.replace(/坚持/g, '努力') }) Vue.filter('msgreplace2', function (msg, reg, reg2) { return msg.replace(/坚持/g, reg + reg2) //传一个参也可 但是在的位置是第二参数 也可以传多个参数 }) Vue.filter('test', function (msg) { //这里是一定要有参数的！！！！！ return msg + '调用多个过滤器' })
组件：
https://www.w3cschool.cn/vuejs/xkos1jsm.html 开头就解释了为啥项目里要那样这样写 先注册组件再到父辈里申请
组件中data为什么是函数
https://www.cnblogs.com/libin-1/p/6878057.html
vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。
上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。
data为函数，通过return 返回对象的拷贝[???c++那边的知识了 啊死了]，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。
父子组件之间传值:
通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。
初学者常犯的一个错误是使用字面量语法传递数值：
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>因为它是一个字面 prop，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算：
<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。
//父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: {Child}, } </script>
//子组件 <template> <h3>我是子组件！</h3> </template> <script> </script>
这两部分的代码都很清晰明了，父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签<child>的形式嵌进父组件了。运行father.vue后的效果是这样的：
1.通过prop实现通信
子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：
（1）静态传递
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。
<!-- 父组件 --> <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child> //通过自定义属性传递数据 这里没有:哦 </div> </template> <script> import Child from '../components/child.vue' export default { components: {Child}, } </script>
<!-- 子组件 --> <template> <h3>{{message}}</h3> </template> <script> export default { props: ['message'] //声明一个自定义的属性 } </script>
(关于这 突然蹦出来的静态 https://cn.vuejs.org/v2/guide/components.html 官方文档
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
My journey with Vue
Blogging with Vue
Why Vue is so fun
然而在一个典型的应用中，你可能在 data 里有一个博文的数组：
new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } })
并想要为每篇博文渲染一个组件：
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>
如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。 归根结底静态就是prop可以把一个随便起的名字变成属性 然后直接用)
（2）动态传递
我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。
<!-- 父组件 --> <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <child v-bind:message="a+b"></child> <!-- 用一个变量进行动态赋值。--> <child v-bind:message="msg"></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: {Child}, data() { return { a:'我是子组件二！', b:112233, msg: '我是子组件三！'+ Math.random() } } } </script>
<!-- 子组件 --> <template> <h3>{{message}}</h3> </template> <script> export default { props: ['message'] } </script>
3.通过$emit 实现通信
上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。
(不传参) (只是找到的稍稍好一点的例子 比较好的解释没找到 也可以看看vscdoe那的例子 大概能弄清在干什么）( 引自 https://www.jianshu.com/p/649929d88699 )
<!--父组件--> <template> <div> <h2>父组件</h2> <br> <Child-one @childEvent="parentMethod"></Child-one> </div> </template> <script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, data() { return { parentMessage: '我是来自父组件的消息', }; }, methods: { parentMethod() { alert(this.parentMessage); }, }, }; </script> <style scoped> </style> <!--子组件--> <template> <div> <h3>我是子组件一</h3> </div> </template> <script> export default{ mounted() { this.$emit('childEvent'); }, }; </script> <style scoped> </style>
（子向父传参）
<!--父组件--> <template> <div> <h2>父组件</h2> <br> <Child-one @childEvent="parentMethod"></Child-one> </div> </template> <script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, data() { return { parentMessage: '我是来自父组件的消息', }; }, methods: { parentMethod({ name, age }) { console.log(this.parentMessage, name, age); }, }, }; </script> <style scoped> </style> <!--子组件--> <template> <div> <h3>我是子组件一</h3> </div> </template> <script> export default{ mounted() { this.$emit('childEvent', { name: 'zhangsan', age: 10 }); }, }; </script> <style scoped> </style>
3.通过$ref 实现通信
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。
看不懂对吧？很正常，我也看不懂。那应该怎么理解？看看我的解释：
- 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
- 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./libs/vue-2.4.0.js'></script> </head> <body> <div id="app"> <input type="button" value='获取' @click='getElement' > <h3 id='h3' ref='myh3'>这世界是块冰 就让他是块冰</h3> <!--ref='myh3'这个myh3是随便起的名字 算是个中间变量？？？反正只是想通过.myh3拿到dom 不必再郑重声明一个变量名--> <!--用ref来获取DOM节点 script里是refs是因为这个的h3就是单个的元素 ref这里就只是代表单个 如果给button也加上ref ref='mybtn'那下面的console.log(this.$refs)就是两个元素的引用了--> <hr> <login ref='mylogin'></login><!--同理mylogin也是随意起的--> </div> <script> var login={ template:'<h1>登录组件</h1>', data(){ return { msg:'son msg' } }, methods:{ show(){ console.log('调用了子组件的show方法') } } } var vm=new Vue({ el:'#app', data:{ }, methods:{ getElement(){ //使用ref来直接获取到dom节点 js原生的话都是直接操作dom的 Vue里不愿意动dom 这里使用在普通的dom元素上 console.log(this) console.log(this.$refs) //{myh3: h3#myh3}结果是个对象 所以下面再console时是.属性 键:myh3值:h3那片 就是个原生DOM对象了 console.log(this.$refs.myh3)//<h3 id="h3">这世界是块冰 就让他是块冰</h3> console.log(this.$refs.myh3.innerText)//这世界是块冰 就让他是块冰 //使用ref来操纵组件 这里是用在子组件上 console.log(this.$refs.mylogin.msg)//son msg 访问组件的data this.$refs.mylogin.show()//调用了子组件的show方法 访问组件的methods } }, components:{ login } }) </script> </body> </html>
例子二
<!-- 父组件 --> <template> <div> <h1>我是父组件！</h1> <child ref="msg"></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: {Child}, mounted: function () { console.log( this.$refs.msg); //message：'我是子组件一' this.$refs.msg.getMessage('我是子组件一！') } } </script> <!-- 子组件 --> <template> <h3>{{message}}</h3> </template> <script> export default { data(){ return{ message:'' } }, methods:{ getMessage(m){ this.message=m; } } } </script>
从上面的代码我们可以发现，通过ref=‘msg'可以将子组件child的实例指给$ref，并且通过.msg.getMessage（）调用到子组件的getMessage方法，将参数传递给子组件。
组件中的data
- 组件中也可以有自己的
data。 - 但是组件中的
data属性只能是一个函数方法（vue实例中的data可以为一个对象）。 - 这个方法内部必须返回一个object对象。
- 组件中的data数据和vue实例中的data数据使用方法一样。
<body> <div id='app'> <log></log> </div> <template id="templ"> <h2>{{msg}}</h2> <!--!!!!!!!直接拿过来用就行--> </template> <script> Vue.component('log', { template: '#templ', data () { return { msg: '组件中的data的数据' } } }); var vm = new Vue({ el: "#app", }); </script> </body>
也这么 直接拿上去写的还有计算属性
<!DOCTYPE html> <html lang="en"> <body> <div id="app"> <p> {{fullName}}</p> <script> var vm= new Vue({ el:'#app', data:{}, methods:{}, computed:{ 'fullName':function(){！！！！！！！} } }) </script> </body> </html>
关于 v-bind 和 class，style
是个大料
详解VUE中常用的几种import（模块、文件）引入方式
/** https://www.jb51.net/article/143051.htm 1 引入第三方插件 import echarts from 'echarts' import axios from 'axios' 2 引入工具类 第一种是引入单个方法 import {axiosfetch} from './util'; import {request} from "./network/request" 下面是写法，需要export导出 export function axiosfetch(options) { } 第二种 导入成组的方法 import * as tools from './libs/tools' (把这些方法另起名叫做tools) 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中怎么用呢？ Vue.prototype.$tools = tools 直接用 this.$tools.method调用就可以了 说到这 export 和 export default 又有什么区别呢？ 下面看下区别 先是 export import {axiosfetch} from './util'; //需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号 如果是两个方法 import {axiosfetch,post} from './util'; 再是 export default import axiosfetch from './util'; //不需要加花括号 只能一个一个导入 3.导入 css文件 import 'iview/dist/styles/iview.css'; 如果是在.vue文件中那么在外面套个style <style> @import './test.css'; </style> 4.导入组件 import name1 from './name1' import name2 from './name2' components:{ name1, name2, }, */
vue使用import来引入组件的注意事项 https://www.cnblogs.com/lihuijuan/p/9993908.html
export default 和 export ：
ES6中 规定了如何导入模块 :import 模块名称 from '模块标识符' 导入样式的话:import ‘表示路径’
ES6中如何导出模块：export default和export向外暴露成员
export default向外暴露的成员 可以用任意的变量接受//在一个模块中 只允许export default向外暴露一次
<script>
export default { //暴露 这个是xx.vue里的
data(){
return {
msg:'123'
};
}.
methods:{
show(){}
}
}
<script>
export default{ age:20}(test.js)
(导入:)import m1 from './test.js'
在一个模块中 可以同时使用export default和export
一个文件里export可以向外暴露多次 只能使用{ }接收：按需导出
export var title = '小星星' (暴露)
export var content = ‘hahaha’
(在另外一个文件里 引入) import {title，content} from ‘前者文件名’
(并且使用)console.log(content)
如果使用export导出的成员 想换个名字 使用as：import {title as title123} from './xxx.js'
node.js向外暴露成员 module.exports和exports 导入成员 var名称 = require('模块标识符')
路由: https://www.cnblogs.com/joyho/articles/4430148.html 前端路由 https://www.cnblogs.com/yuqing6/p/6731980.html
单页面应用(SPA)就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
(就比如单机小游戏) MVVM/ajax/Vue Router ：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载(更新视图但不重新请求页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./libs/vue-2.4.0.js'></script> <script src='./libs/vue-router.js'></script> <!--file:///D:/Vue/xxx.html#/导入路由包后出来的 #/--> <style> /*.router-link-active{ 选中路由后 router-link那就会多出这个class 把它拿来作为高亮的class 修改高亮的第一种方式 其实就是选中路由后 默认激活class 值是router-link-active 如果想更改类名 在构造函数里加linkActiveClass color:turquoise; }*/ .myOwnClass { /*修改高亮的第二种方式*/ background-color: violet; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(160px); } .v-enter-active, .v-leave-active { transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <!--<a href="#/login">登录</a> <a href="#/register">注册</a> --> <!--点击链接URL地址发生改变 此时路由对象已经注册到VM上了 路由监听到URL地址的改变 进行路由规则匹配 匹配到相应path 在route-view上展示相应的组件--> <!--router-link默认渲染为一个a标签 如果想换成其它标签 eg:tag='span'--> <router-link to="/login">登录</router-link> <router-link to='/register'>注册</router-link> <!--给显示区域加上动画 用transition或者transition group即可--> <transition mode='out-in'> <!--由vue-routr提供 用作占位符 路由规则匹配到的组件就会展示到这个 route-view--> <router-view></router-view> </transition> </div> <script> //组件的模板对象 var login = { template: '<h1>登录组件</h1>' } var register = { template: '<h1>注册组件</h1>' } //创建一个路由对象 导入vue-router包后 在window全局对象中 有了一个路由的构造函数 VueRouter 为构造函数传递一个配置对象 var routerObj = new VueRouter({ //这个配置对象中的 route 表示 【路由匹配规则】 routes: [ //route:路由匹配规则 routes 可以有很多个匹配规则 每条规则都是一个对象 { path: '/', redirect: '/login' },//路由redirect重定向 就是刚进入页面时 根路径需要展示默认组件 怎么设置https://www.jianshu.com/p/c07250ac5472 { path: '/login', component: login }, //参数一:path 表示监听哪个路由链接地址 参数二:表示路由如果是前面匹配到的path地址 则展示component属性对应的组件 这里只能是组件模板对象 而不能是组件的引用名称(后者仅适用于html这个<>在页面上去引用) { path: '/register', component: register } ], linkActiveClass: 'myOwnClass' }) var vm = new Vue({ el: '#app', data: {}, methods: {}, router: routerObj,//将路由注册对象 注册到VM实例上 用来监听URL地址的变化 然后展示相应组件 }) </script> </body> </html>
关于 动态路由 路由传参 $router 和 $route $route.params/$route.query