Vue的相关知识点
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue的相关知识点,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含24693字,纯文字阅读大概需要36分钟。
内容图文
<style> [v-cloak]{ visibility: hidden; } </style>
<div id="example"> {{ message.split(‘‘).reverse().join(‘‘) }} </div>
<p>Reversed message: "{{ reversedMessage() }}"</p> // 在组件中 methods: { reversedMessage: function () { return this.message.split(‘‘).reverse().join(‘‘) } }
a: function (val, oldVal) { console.log(‘new: %s, old: %s‘, val, oldVal) }
c: { deep: true , handler: function (val, oldVal) { console.log(‘new: %s, old: %s‘, val, oldVal) } }
num:{ immediate: true , handler: function (val){ this.nums = val*2 } }
xm:{ get: function(){//getter 当依赖改变后设置值的时候returnthis.xing+‘丶‘+this.ming }, set:function(val){//setter 当自身改变后执行this.xing = val.split(‘丶‘)[0] this.ming = val.split(‘丶‘)[1] } }
<p>{{msg | firstUpper(3,2)}}</p> Vue.filter(‘firstUpper‘,function (value,num=1,num2) { console.log(num2) return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase() })
filters:{ firstUpper: function (value,num=1,num2) { console.log(num2) return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase() } }
<input type="text" v-model="mode"> <template v-if="mode==‘A‘"> <h1>1.title</h1> <p>我的第一个P标签</p> </template> <template v-else-if="mode==‘B‘"> <h1>2.title</h1> <p>我的第二个P标签</p> </template> <template v-else-if="mode==‘C‘"> <h1>3.title</h1> <p>我的第三个P标签</p> </template> <template v-else> <p>不好意思,输入有误</p> </template>
Vue.extend(options)
var App = Vue.extend({ template:"<h1>hello world</h1>" }) Vue.component(‘my-app‘,App)
// 创建组件构造器和注册组件合并一起 Vue.component(‘hello‘,{//Vue会自动的将此对象给Vue.extend template:"<h1>hello</h1>" })
new Vue({ el:"#app", components:{ ‘my-app‘:App } })
data:{}, components:{ ‘hello‘:{ template:"<h1>asdasdasdasdasdas</h1>" } }
<table id="app"> <tr is="hello"></tr> </table>
<template id="my-hello"> <div> <h1>hello world</h1> <p>hahahah</p> </div> </template> //组件中 template:"#my-hello"
<component :is="type"></component> //组件中 data:{ type:‘aaa‘ }, components:{ ‘aaa‘:{template:"<h1>AAAAAAAAAAAAA</h1>"}, ‘bbb‘:{template:"<h1>BBBBBBBBBBBBB</h1>"} }
<bbb money="2"></bbb>
‘bbb‘:{ props:[‘money‘] }
<bbb clothes-logo=‘amani‘ clothes-price="16.58"></bbb> props:[‘clothesLogo‘,‘clothesPrice‘]
props: [‘initialCounter‘], data: function () { return { counter: this.initialCounter } } //定义一个计算属性,处理 prop 的值并返回: props: [‘size‘], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
props:{ //类型验证: str:String, strs:[String,Number], //必传验证 num:{ type:Number, required:true }, //默认数据 bool:{ type:Boolean, // default:true, default:function(){ return true } }, //自定义验证函数 nums:{ type:Number, validator: function (value) { return value %2 == 0 } } }
<aaa>abc</aaa> template:"<h1><slot></slot></h1>"
<my-button>提交</my-button> <my-button>重置</my-button> <my-button></my-button> template:"<button><slot>按钮</slot></button>"
<transition leave-active-class="animated fadeOut" enter-active-class="animated slideInLeft"> <p v-if="isShow" class="box"></p> </transition>
在vue中我们可以不用template来指定组件的模板,而是用render函数来创建虚拟dom结构,用这种方法优点就是性能高,缺点就是使用成本高,代码可读性较低,可以使用jsx来在render函数中创建,这样既提高了性能,又减少了成本 但是,我们在使用了vue-cli脚手架之后,因为脚手架中有对template标签转换虚拟dom的处理,所以,不需要使用jsx,我们也能高效的转换为createElement形式
全局安装 vue-cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my-project //init之后可以定义模板的类型 安装依赖,走你 cd my-project npm install npm run dev
{ test: /\.scss$/, loader:‘style-loader!css-loader!sass-loader‘ }
import Vue from ‘vue‘ import Router from ‘vue-router‘ Vue.use(Router)
new Router(options)
var routes = [ {path,component}//path为路径,component为路径对应的路由组件 ] new Router({ routes })
new Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: { App } })
<router-link to="main">main</router-link> <router-link to="news">news</router-link> .router-link-active{ color:red; }
const routes = [ {path:‘/main‘,component:AppMain}, {path:‘/news‘,component:AppNews,children:[ {path:‘inside‘,component:AppNewsInside}, {path:‘outside‘,component:AppNewsOutside} ]}, ]
<router-link to=‘inside‘>inside</router-link> <router-link to=‘outside‘>outside</router-link> <router-view></router-view>
{path:‘‘,component:‘/main‘}
{path:‘‘,redirect:‘/main‘} {path:‘**‘,redirect:‘/main‘}
{path:‘/user/:id‘,component:User}
:to=‘{name:"detail",params:{id:_new.id},query:{content:_new.content}}‘
router.push = router-link:to router.replace = router-link:to.replace router.go() = window.history.go
router.beforeEach((to, from, next) => { //会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了 console.log(‘beforeEach‘) console.log(to,from) next() }) router.afterEach((to, from) => { //会在任意路由跳转后执行 console.log(‘afterEach‘) })
routes: [ { path: ‘/foo‘, component: Foo, beforeEnter: (to, from, next) => { // ... } } ]
beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` }
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
const router = new VueRouter({ routes: [ { path: ‘/‘, components: { default: Foo,//默认的,没有name的router-view a: Bar, b: Baz } } ] })
{path:‘detail/:id‘,component:AppNewsDetail,name:‘detail‘,props:true}
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) //可以设置store管理的state/getter,mutations,actions const store = new Vuex.Store({ })
import state from ‘./modules/state‘ //可以设置store管理的state/getter,mutations,actions const store = new Vuex.Store({ state })
import store from ‘./store‘ new Vue({ el: ‘#app‘, router, store, template: ‘<App/>‘, components: { App } })
data(){ return { num:this.$store.state.num } }
computed:{ num(){ return this.$store.state.num } }
computed:mapState([‘num‘])
computed:mapState({ // _num:‘num‘,//键名为别名,值字符串代表的是真正的状态 _num(state){//方法名为别名,函数体里还可以对真正的状态做出一些处理 return state.num } })
computed:{ a(){ return num+1 }, ...mapState({ // _num:‘num‘,//键名为别名,值字符串代表的是真正的状态 _num(state){//方法名为别名,函数体里还可以对真正的状态做出一些处理 return state.num } }), }
const getters = { doublenum(state){ return state.num*2 } }
const mutations = { increment(state){ state.num++ } }
const actions = { [CHANGE_NUM]({commit}){ alert(1) setTimeout(() => { let num = Math.floor(Math.random()*10) //调用mitations的方法 commit(CHANGE_NUM,num) }, 1000); } }
function foo(){// 第16行 getName = function(){console.log(1)} return this } foo.getName = function(){console.log(2)} foo.prototype.getName = function(){console.log(3)} var getName = function(){console.log(4)} function getName(){console.log(5)} foo.getName()//2 //foo是一个函数,也可以说是一个对象,所以它也可以挂载一些属性和方法,18行在其上挂载了一个getName方法 //执行的结果是 getName()//4 //21行有一个全局函数,全局函数声明提前后被20行的getName覆盖,所以输出4 foo().getName()//1 //foo()执行完成后,将全局的getName也就是window.getName给更改后返回this,而在这里this执行的就是window,所以最后执行的就是window.getName,所以输出1 getName()//1 //在上面已经更改全局的getName,所以依然是1 new foo.getName()//2 //new 操作符在实例化构造器的时候,会执行构造器函数,也就是说,foo.getName会执行,输出2 new foo().getName()//3 //new操作符的优先级较高,所以会先new foo()得到一个实例,然后再执行实例的getName方法,这个时候,实例的构造器里没有getName方法,就会执行构造器原型上的getName方法 new new foo().getName()//3 //先执行new foo()得到一个实例,然后在new 这个实例的getName方法,这个时候会执行这个方法,所以输出3 //除了本地对象的方法,其他的函数都能new
原文:https://www.cnblogs.com/llc-url/p/8371657.html
内容总结
以上是互联网集市为您收集整理的Vue的相关知识点全部内容,希望文章能够帮你解决Vue的相关知识点所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。