vue 实战学习

let和var和const声明变量

let

1、（相同作用域内）不可以重复声明
2、声明的变量是局部变量（一般for循环中使用了他声明i）
3、不存在变量提升（变量提升是在var中存在的，var声明的变量会在程序最开始统一定义一个空的变量(undefined)）
var 声明的变量是，全局变量
const 声明常量，声明时必须进行初始化，初始化后不可以进行修改（声明的变量是块级作用域），不可重复声明
字符串拼接

1、使用加号进行拼接例子：

                                    var a = 1;
                                    var b=2;
                                    var str = '啦啦啦'+a+'啊哈哈'+b
 2、使用反引号中间变量使用${变量名}，例子： var str = `啦啦啦'+a+'啊哈哈`+b

函数定义方法：
1、普通定义方法
    var f = function(a){
        return a;
    }
2、箭头函数
    （1）var f =a=>a 等价于1中的定义的函数，
    等价于 var f = (a) = >{return a}
    （2）var sum = (num1, num2) =>num1+num2
    等价于 var sum = function(num1,num2) return num1+num2
    （3）箭头函数的坑：不能使用this调用，指向window对象。
    （4）不能使用arguments（获取参数）
   3、简写 f(a){return a;} 等价于1中定义的函数，没有箭头函数的坑
    
es6    部分语法，当前浏览器不支持
构造函数，定义对象    

对象单体模式

var animal={
    attribute1:true,
     attribute2:10,
    method1:function(){
 
     },
     method2:function(arg){
 
     }
 }

单体对象调用

animal.method2('参数')

es5构造函数

1、首字母必须大写（默认约定）
 2、构造定义对象，例子：
//定义构造函数的方式创建对象

function Animal(name, age){
    this.name = name;
    this.age =age;
            }

//对象中添加函数(showName),每添加一个函数都要按照如下格式重写 一次

Animal.prototype.showName = function(){
        console.log(this.name)
            }
//添加函数(showName2)
Animal.prototype.showName2 = function(){
                console.log(this.name)
        }

 // 对象声明
 var dog = new Animal('张猛',20)
 3、通过es6定义对象

class Animal{
//构造函数
constructor(name,age){
this.name =name;
this.age = age;
}//这个位置不能加逗号
showName(){
console.log(this.name)
 }
 }

           
npm
1、下载前要先进行初始化，npm init（加--yes，会取消提示）,会创建一个package.json的依赖文件
2、npm install jquery --save    //安装jquery，可在jquery后加@然后加版本号，来指定版本。--save是为了保存项目依赖到package.json中            
3、npm uninstall jquery --save   //卸载
4、npm install 通过package.json 查看依赖的包，然后进行下载

5、 npm rum dev //运行

npm run build //进行编译
 

 webpack 

打包使用，把所用前端进行打包压缩，可以把es6（模块化方案）进行编译成为各个浏览器都可以识别的  

 模块化

一个js文件就是一个模块

//导出模块

export default xxx

导入（导入前必须对应的有相应的导出）

import xxx from ooo
    
 

 

vue计算属性

默认有只用get方法，可以 定义添加set属性

 

计算属性会进行监听（watch）,当数据改变时会立即调用

html中调用 {{reverse}}

vue中定义

computed:{

reverse(){

//进行反转

return this.msg.split('').reverse().join('');

}}

vue组件

使用export default{name:'vchat',data(){return{}}}导出，name名就是组件名

然后导入  impot chat from ‘路径’

然后声明

components:{vchat,}

调用时直接在html中使用 <vchat></vchat>就可以调用

注意：在组件中使用style时，写为<style scoped> 这样的style只在当前组件中生效

 

vue创建项目

使用简单模板 vue init webpack-simple  project 创建名为project的vue项目

可使用webpack模板

当创建项目时问Use sass ?(y/N)   选择n，其余的直接enter就行了

只需要关心src文件夹下的文件

 

vue-router

先导入

import VurRouter from 'vue-router'

声明使用了

Vue.use(VurRouter )

 定义router，每一个对应一个组件
 

 const router = new VurRouter({

routers:[

{path:'/',compoent:Vmain}

{path:'/chat',compoent:Vchat}

{path:'/course',compoent:Vcourse}

]})

路由点击切换
 

<router-link to="/">首页</router-link>

<router-link to="/chat">聊天</router-link>

路由点击切换后的组件将会渲染到router-view标签中。

<router-view><router-view>

 

vuex解决组件参数共享