首页 >> js开发 >> jsVue的Options用法说明js大全
jsVue的Options用法说明js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
el：挂载点el：挂载点与$mount有替换关系
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')
注：被你选为挂载点的那个元素，如果在index.html里那个元素里面本来就有内容，在渲染时会消失（网速慢可以看到），被这个vue实例的对应内容所覆盖。data：内部数据data：内部数据支持对象和函数，优先用函数
new Vue({
//优先使用函数
data() {
return {
n: 0,
}
}
}).$mount("#app");
new Vue({
//优先使用函数
data() {
return {
n: 0,
}
}
}).$mount("#app");注：能写函数尽量写函数，否则有可能有BUG；methods：方法methods：方法事件处理函数
new Vue({
data (){
return{
n:0
}
},
template:`
{{n}}
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')
new Vue({
data (){
return{
n:0
}
},
template:`
{{n}}
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')普通函数：methods代替filter
import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
data() {
return {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
};
},
template: `
{{n}}
//事件处理函数
{{filter()}}
//普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
`,//主动在模板里面调用
methods: {
add() {
this.n += 1; //事件处理函数
},
filter() {
return this.array.filter(i => i % 2 === 0); //普通函数
}
}
}).$mount("#app");
import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
data() {
return {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
};
},
template: `
{{n}}
//事件处理函数
{{filter()}}
//普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
`,//主动在模板里面调用
methods: {
add() {
this.n += 1; //事件处理函数
},
filter() {
return this.array.filter(i => i % 2 === 0); //普通函数
}
}
}).$mount("#app");
components：方法components：方法使用Vue组件，注意大小写（建议用法） 模块化：新建一个vue文件Demo.vue，这个vue文件就是一个组件在main.js中引入这个vue文件在vue实例的components中声明这是我要用的组件，并且命名为Demo这样在这个Vue实例的template中就可以直接使用这个组件
import Vue from "vue";
import Demo from "./Demo.vue"; //引入这个vue文件
---文件名最好小写 组件名最好大写
Vue.config.productionTip = false;
new Vue({
components: {
Demo //在vue实例的components中声明这是我要用的组件，并且命名为Demo
//如果组件名就叫Demo，即Demo：Demo，那就写Demo --ES6缩写
//components: {Demo},
},
data() {
return {
n: 0
};
},
template: `
{{n}}
//这样在这个Vue实例的template中就可以直接使用这个组件`
`,
methods: {
add() {
this.n += 1;
},
}
}).$mount("#app");
import Vue from "vue";
import Demo from "./Demo.vue"; //引入这个vue文件
---文件名最好小写 组件名最好大写
Vue.config.productionTip = false;
new Vue({
components: {
Demo //在vue实例的components中声明这是我要用的组件，并且命名为Demo
//如果组件名就叫Demo，即Demo：Demo，那就写Demo --ES6缩写
//components: {Demo},
},
data() {
return {
n: 0
};
},
template: `
{{n}}
//这样在这个Vue实例的template中就可以直接使用这个组件`
`,
methods: {
add() {
this.n += 1;
},
}
}).$mount("#app");
四个钩子四个钩子
created -- 实例出现在内存中后触发
created(){
debugger
console.log('这玩意出现在内存中')
},
created -- 实例出现在内存中后触发
created(){
debugger
console.log('这玩意出现在内存中')
},mounted-- 实例出现在页面中（挂载了）后触发
mounted(){
debugger
console.log('这玩意儿已出现在页面中')
},
mounted(){
debugger
console.log('这玩意儿已出现在页面中')
},updated -- 实例更新了后触发
updated(){
console.log('更新了')
console.log(this.n)
},
//当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的n
updated(){
console.log('更新了')
console.log(this.n)
},
//当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的ndestroyed -- 实例从页面和内存中消亡了后触发props：外部属性props：外部属性外部来传值message="n"传入字符串message:message="n"传入vue实例的this.n数据:message:fn="add"传入vue实例的this.add函数:fn="add"示例示例补充知识：vue $options初始化补充知识：补充知识：vue $options初始化vue实例化时，对$options进行初始化vue/src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
//初始化$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
}
}
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
//初始化$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
}
}
以上这篇Vue的Options用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考。
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')
注：被你选为挂载点的那个元素，如果在index.html里那个元素里面本来就有内容，在渲染时会消失（网速慢可以看到），被这个vue实例的对应内容所覆盖。data：内部数据data：内部数据支持对象和函数，优先用函数
new Vue({
//优先使用函数
data() {
return {
n: 0,
}
}
}).$mount("#app");
new Vue({
//优先使用函数
data() {
return {
n: 0,
}
}
}).$mount("#app");注：能写函数尽量写函数，否则有可能有BUG；methods：方法methods：方法事件处理函数
new Vue({
data (){
return{
n:0
}
},
template:`
{{n}}
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')
new Vue({
data (){
return{
n:0
}
},
template:`
{{n}}
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')普通函数：methods代替filter
import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
data() {
return {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
};
},
template: `
{{n}}
//事件处理函数
{{filter()}}
//普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
`,//主动在模板里面调用
methods: {
add() {
this.n += 1; //事件处理函数
},
filter() {
return this.array.filter(i => i % 2 === 0); //普通函数
}
}
}).$mount("#app");
import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
data() {
return {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
};
},
template: `
{{n}}
//事件处理函数
{{filter()}}
//普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
`,//主动在模板里面调用
methods: {
add() {
this.n += 1; //事件处理函数
},
filter() {
return this.array.filter(i => i % 2 === 0); //普通函数
}
}
}).$mount("#app");
components：方法components：方法使用Vue组件，注意大小写（建议用法） 模块化：新建一个vue文件Demo.vue，这个vue文件就是一个组件在main.js中引入这个vue文件在vue实例的components中声明这是我要用的组件，并且命名为Demo这样在这个Vue实例的template中就可以直接使用这个组件
import Vue from "vue";
import Demo from "./Demo.vue"; //引入这个vue文件
---文件名最好小写 组件名最好大写
Vue.config.productionTip = false;
new Vue({
components: {
Demo //在vue实例的components中声明这是我要用的组件，并且命名为Demo
//如果组件名就叫Demo，即Demo：Demo，那就写Demo --ES6缩写
//components: {Demo},
},
data() {
return {
n: 0
};
},
template: `
{{n}}
//这样在这个Vue实例的template中就可以直接使用这个组件`
`,
methods: {
add() {
this.n += 1;
},
}
}).$mount("#app");
import Vue from "vue";
import Demo from "./Demo.vue"; //引入这个vue文件
---文件名最好小写 组件名最好大写
Vue.config.productionTip = false;
new Vue({
components: {
Demo //在vue实例的components中声明这是我要用的组件，并且命名为Demo
//如果组件名就叫Demo，即Demo：Demo，那就写Demo --ES6缩写
//components: {Demo},
},
data() {
return {
n: 0
};
},
template: `
{{n}}
//这样在这个Vue实例的template中就可以直接使用这个组件`
`,
methods: {
add() {
this.n += 1;
},
}
}).$mount("#app");
四个钩子四个钩子
created -- 实例出现在内存中后触发
created(){
debugger
console.log('这玩意出现在内存中')
},
created -- 实例出现在内存中后触发
created(){
debugger
console.log('这玩意出现在内存中')
},mounted-- 实例出现在页面中（挂载了）后触发
mounted(){
debugger
console.log('这玩意儿已出现在页面中')
},
mounted(){
debugger
console.log('这玩意儿已出现在页面中')
},updated -- 实例更新了后触发
updated(){
console.log('更新了')
console.log(this.n)
},
//当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的n
updated(){
console.log('更新了')
console.log(this.n)
},
//当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的ndestroyed -- 实例从页面和内存中消亡了后触发props：外部属性props：外部属性外部来传值message="n"传入字符串message:message="n"传入vue实例的this.n数据:message:fn="add"传入vue实例的this.add函数:fn="add"示例示例补充知识：vue $options初始化补充知识：补充知识：vue $options初始化vue实例化时，对$options进行初始化vue/src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
//初始化$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
}
}
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag)
}
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
//初始化$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
}
}
以上这篇Vue的Options用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
