vue脚手架安装及语法简写

脚手架安装

node --version
npm -v
vue -V

vue脚手架安装
安装vue-cli
全局安装命令
npm install -g [email protected](npm uninstall vue-cli -g卸载命令)

在某个文件下执行vue init webpack vue_demo
vue_demo是项目名称

vue缩写:



//完整语法 
<a v-bind:href="url">...</a>

// 缩写  
<a :href="url">...</a>


// 完整语法  
<a v-on:click="doSomething">...</a> 

// 缩写 
<a @click="doSomething">...</a>


路由:
const router = new VueRouter({
    
    
 routes: [  
	 {
    
        
	 path: '/user/:userId',    
	 name: 'user',    
	 component: User  
	 } 
 ] 
 })

 //html跳转
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
 
 // js跳转 
 router.push({
    
     name: 'user', params: {
    
     userId: 123 }})
 
 
 //es6箭头函数:
 
let func1=function(){
    
    
    console.log('普通无参匿名函数');
}
func1();
 
//前面的括号是方法参数,里面可以写形参;=>后面的内容是方法体
let func2=()=>console.log('箭头函数');
func2();

//假如有一个参数的时候,这么写:
let func3=(c)=>console.log('箭头函数,一个参数');
func3('参数一');

//当然一个参数的时候,括号可以省略(我个人习惯,还是不省略,不然看着别扭)
let func4=c=>console.log('箭头函数,一个参数,括号可以省略');
func4('参数一');
 
// 两个或者两个以上参数情况 (括号不能省略)
let func5=(a,b)=>console.log(a,b);
func5(1,2);

// 箭头函数,只有一条语句,可以省略大括号{}
let func6=()=>{
    
    
	console.log('箭头函数,只有一条语句,可以省略大括号{}');
}
func6();

// 函数体,多条语句,要用大括号{}
let func7=(a,b)=>{
    
    
	let c=a+b;
	return c;
}
console.log(func7(1,2));

// 特殊情况 假如不加花括号,表达式返回最终结果;
let func8=(a,b)=>a+b
console.log(func8(1,4));

猜你喜欢

转载自blog.csdn.net/weixin_38323645/article/details/108441333
今日推荐