Vue学习笔记:记录于此,以观后效
(1)
使用export抛出的变量需要用{}进行import:
//a.js
export function getList(){};
//b.js
import { getList } from ‘./a.js’;
(2)
使用export default抛出的变量,只需要自己起一个名字就行:
//a.js
var obj = { name: ‘zhazhahui’ };
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;
(3)
切记,一个js文件中,只能有一个export default;
但是,一个js文件中,可以有多个export。
******************************************************************************************
index.html <div id="app000"></div>中的id必须与
main.js new Vue({el:'#app000'})中的el名称一致,推测:vue会重新渲染前端,id会被vue重新设置,
<div id="app000"></div>中间的元素都没有显示出来,但是刷新的时候会一闪而过
******************************************************************************************
App.vue <div id="app111">中的id必须与App.vue中的<style> #app111名称保持一致。div中使用的id就是style中的选择器
******************************************************************************************
因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化:
直接用索引设置元素,如 vm.items[0] = {};
修改数据的长度,如 vm.items.length = 0。
为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:
// 与 `example1.items[0] = ...` 相同,但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
至于问题 (2),只需用一个空数组替换 items。
除了 $set(), Vue.js 也为观察数组添加了 $remove() 方法,用于从目标数组中查找并删除元素,在内部它调用 splice() 。因此,不必这样:
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
}
只用这样:
this.items.$remove(item)
******************************************************************************************
label标签的for属性,有了for属性,点击label的文字,会触发for对应的id的checkbox的选中/取消效果,没有for对应的id就只能点击checkbox,点文字没反应
******************************************************************************************
页面跳转:
主页面跳转:
标签a <a href="http://www.baidu.com" style="color:#00ffff">百度</a>
标签router-link <router-link to="/MySecondVue"> test </router-link>
router-link可以主页面跳转,也可以子页面跳转,跳转后url会变
router/index.js或者和main.js同级目录的router.js中定义路由(router名字可以改)
export default new Router({
routes: [
{
path: '/',
name: 'MyFristVue',
component: MyFristVue,
redirect:'/123' ,
children: [{
path: '/123',
name: 'MySecondVue',
component: MySecondVue
},
{
path: '/1232',
name: 'MySecondVue2',
component: MySecondVue2
}
]
},
{
path: '/MySecondVue',
name: 'MySecondVue',
component: MySecondVue
}
]
})
主页面的跳转需要同级路由元素MyFirstVue-->MySecondVue
to是route中的path
子页面跳转
MysecondVue-->MySecondVue2
<div class="right">
<router-link to="/123"> test </router-link>
<br>
<router-link to="/1232"> t000est </router-link>
</div>
<router-view>
</router-view>
router-view中什么都不用写
上面Router的写法会报警告,说是MySecondVue有两个路由,只做例子,不做项目
******************************************************************************************
父页面向子页面传递数据
<MyTag v-if="tagchange" parentmessage="i am oddd first vue"> </MyTag>
<MyTag2 v-else="tagchange"> </MyTag2>
MyTag中加入
export default {
name:"MyTag",
props:['parentmessage'],
data () {
return {
tagMsg:""
}
}
}
动态传递
<input v-model="firstMsg" placeholder="for tag3">
<MyTag3 v-bind:parentmessageone="firstMsg"> </MyTag3>
data中加入firstMsg: '',
input中修改的数值会因为v-bind传入到子页面
<p>MyTag33 {{parentmessageone}}</p>
子页面的parentmessageone会接收实时修改的firstMsg
******************************************************************************************
子页面向父页面添加数据
子页面中<button id="button2" @click="sendToParent"> 给父页面发消息 </button>用来触发sendToParent函数
methods:{
sendToParent:function(){
console.log('sendToParent happen');
this.$emit('reciveMsg', this.$data.tagMsg + 'reciveMsg');
}
}
sendToParent函数中调用this.$emit。父页面中要@reciveMsg,
父页面中<MyTag2 v-else="tagchange" @reciveMsg='pppreciveMsg'> </MyTag2>
methods: {
pppreciveMsg:function(data){
console.log('get msg : ppp : ' + data);
}
}
@reciveMsg用来跟子页面绑定,子页面调用this.$emit后会触发pppreciveMsg函数
******************************************************************************************
(1)
使用export抛出的变量需要用{}进行import:
//a.js
export function getList(){};
//b.js
import { getList } from ‘./a.js’;
(2)
使用export default抛出的变量,只需要自己起一个名字就行:
//a.js
var obj = { name: ‘zhazhahui’ };
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;
(3)
切记,一个js文件中,只能有一个export default;
但是,一个js文件中,可以有多个export。
******************************************************************************************
index.html <div id="app000"></div>中的id必须与
main.js new Vue({el:'#app000'})中的el名称一致,推测:vue会重新渲染前端,id会被vue重新设置,
<div id="app000"></div>中间的元素都没有显示出来,但是刷新的时候会一闪而过
******************************************************************************************
App.vue <div id="app111">中的id必须与App.vue中的<style> #app111名称保持一致。div中使用的id就是style中的选择器
******************************************************************************************
因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化:
直接用索引设置元素,如 vm.items[0] = {};
修改数据的长度,如 vm.items.length = 0。
为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法:
// 与 `example1.items[0] = ...` 相同,但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
至于问题 (2),只需用一个空数组替换 items。
除了 $set(), Vue.js 也为观察数组添加了 $remove() 方法,用于从目标数组中查找并删除元素,在内部它调用 splice() 。因此,不必这样:
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
}
只用这样:
this.items.$remove(item)
******************************************************************************************
label标签的for属性,有了for属性,点击label的文字,会触发for对应的id的checkbox的选中/取消效果,没有for对应的id就只能点击checkbox,点文字没反应
******************************************************************************************
页面跳转:
主页面跳转:
标签a <a href="http://www.baidu.com" style="color:#00ffff">百度</a>
标签router-link <router-link to="/MySecondVue"> test </router-link>
router-link可以主页面跳转,也可以子页面跳转,跳转后url会变
router/index.js或者和main.js同级目录的router.js中定义路由(router名字可以改)
export default new Router({
routes: [
{
path: '/',
name: 'MyFristVue',
component: MyFristVue,
redirect:'/123' ,
children: [{
path: '/123',
name: 'MySecondVue',
component: MySecondVue
},
{
path: '/1232',
name: 'MySecondVue2',
component: MySecondVue2
}
]
},
{
path: '/MySecondVue',
name: 'MySecondVue',
component: MySecondVue
}
]
})
主页面的跳转需要同级路由元素MyFirstVue-->MySecondVue
to是route中的path
子页面跳转
MysecondVue-->MySecondVue2
<div class="right">
<router-link to="/123"> test </router-link>
<br>
<router-link to="/1232"> t000est </router-link>
</div>
<router-view>
</router-view>
router-view中什么都不用写
上面Router的写法会报警告,说是MySecondVue有两个路由,只做例子,不做项目
******************************************************************************************
父页面向子页面传递数据
<MyTag v-if="tagchange" parentmessage="i am oddd first vue"> </MyTag>
<MyTag2 v-else="tagchange"> </MyTag2>
MyTag中加入
export default {
name:"MyTag",
props:['parentmessage'],
data () {
return {
tagMsg:""
}
}
}
动态传递
<input v-model="firstMsg" placeholder="for tag3">
<MyTag3 v-bind:parentmessageone="firstMsg"> </MyTag3>
data中加入firstMsg: '',
input中修改的数值会因为v-bind传入到子页面
<p>MyTag33 {{parentmessageone}}</p>
子页面的parentmessageone会接收实时修改的firstMsg
******************************************************************************************
子页面向父页面添加数据
子页面中<button id="button2" @click="sendToParent"> 给父页面发消息 </button>用来触发sendToParent函数
methods:{
sendToParent:function(){
console.log('sendToParent happen');
this.$emit('reciveMsg', this.$data.tagMsg + 'reciveMsg');
}
}
sendToParent函数中调用this.$emit。父页面中要@reciveMsg,
父页面中<MyTag2 v-else="tagchange" @reciveMsg='pppreciveMsg'> </MyTag2>
methods: {
pppreciveMsg:function(data){
console.log('get msg : ppp : ' + data);
}
}
@reciveMsg用来跟子页面绑定,子页面调用this.$emit后会触发pppreciveMsg函数
******************************************************************************************