vue的基础使用

时间 2019-11-19

标签 vue 基础使用繁體版

原文原文链接

vue的介绍

渐进式的JavaScript框架

vue           react            angualr

做者:尤雨溪    facebook         谷歌公司


文档:中文  建议:若是你想学好vue  
1.看视频  初步的了解vue  
2.学vue的课 时刻看官网文档  https://cn.vuejs.org/

前端框架和库的区别

功能上的不一样

jquery库：包含DOM(操做DOM)+请求，就是一块功能。

art-template库：模板引擎渲染，高性能的渲染DOM    (咱们后端的一种模板  跟python的模板相似)

框架：大而全的概念，简易的DOM体验+请求处理+模板引擎

在KFC的世界里，库就是一个小套餐，框架就是全家桶。

代码上的不一样

通常使用库的代码，是调用某个函数或者直接使用抛出来的对象，咱们本身处理库中的代码。
通常使用框架，其框架自己提供的好的成套的工具帮咱们运行咱们编写好的代码。

框架的使用

初始化自身的一些行为
执行你所编写的代码
释放一些资源

nodejs

去官网https://nodejs.org/en/download/ 下载安装(傻瓜式安装)javascript
打开终端 cmd : 执行node -v 若是出现版本号，证实安装node成功，跟安装python雷同html
下载完node以后，会自带包管理器 npm，比如是python中 pip3包管理器。pip3 install xxx前端

使用npmvue

1.要初始化npm的项目 :java

npm init --yes 自动生成一个package.json文件node

```javascript
{

    "name": "vue_lesson",

    "version": "1.0.0",

    "description": "这是个人vue的第一个项目",

    "main": "index.js",

    "scripts": {

      "test": "echo "Error: no test specified" && exit 1"

    },

    "author": "mjj",

    "license": "ISC",

    "dependencies": {

      "vue": "^2.5.16"

    }

  }

```

2.下载依赖包python

npm install vue --save
npm install jquery --savereact

3.卸载包 npm uninstall vue --savejquery

4.下载全部的依赖包 npm installajax

vue的起步

引包:
建立实例化对象

new Vue({
el:'#app',//目的地
data:{
    msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
    {{变量}}
    {{1+1}}
    {{'hello'}}
    {{函数的调用}}
    {{1==1?'真的':'假的'}}
*/

指令系统

//经常使用
v-text 
v-html 
v-if
v-show
v-for
v-bind
v-on

表单控件的value (看后面)

v-if和v-show

v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

//保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素

<a href="" class='box'></a>
<img src="" alt="">
使用v-bind:class = '{}||[]||变量名||常量' 对咱们的页面中标签的属性进行绑定 全部的属性均可以进行绑定,注意只要使用了v-bind 后面的字符串必定是数据属性中的值

v-on v-bind v-for

// 1.事件源 2.事件  3.事件驱动程序
vue中使用v-on:click对当前DOM绑定click事件 注意:全部的原生js的事件使用v-on均可以绑定

v-if和v-on 来对页面中DOM进行操做

v-bind:class和v-on对页面中DOM的样式切换

v-bind和v-on

在vue中它能够简写: v-bind:         
:class 等价于 v-bind:class   
:src 等价于v-bind:src
:id 等价于v-bind:id
v-on:click   等价于 @click = '方法名'

v-text  v-html  {{}}: 对页面的dom进行赋值运算   至关与js中innerText innerHTML

v-if = 'true':
//建立
var oP =   document.createElement('p')  ;
oDiv.appendChild(op)

v-if = 'false'
//销毁
oDiv.removeChild(op)
v-show = 'true'
oDiv.style.display = 'block'
v-show:'true'
oDid.style.display = 'none'

v-bind:class
oDiv.className += ' active'

/*
渐进式的JavaScript框架
作加法和作减法:大部分的人以为作加法简单,作减法难
vue这个框架 将 作减法的事情都给我们作了(难的部分)
学习简单的部分就能实现复杂的dom操做
*/

组件的使用

局部组件的使用

打油诗: 1.声子 2.挂子 3.用

//1.声子
var App = {
 tempalte:`
   <div class='app'></div>`
};


new Vue({
 el:"#app",
 //3.用子  
 template:<App />
 //2.挂子
 components:{
    App
 }

})

(1)父组件向子组件传递数据:经过Prop

1.在子组件自定义特性。props:['自定义的属性1','自定义属性2']

当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么咱们就能够像访问data中的值同样  
2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = '父组件中data声明的数据属性'/>

注意:一个组件默承认以拥有任意数量的 prop，任何值均可以传递给任何 prop。

(2)如何从子组件传递数据到父组件

1.给子组件中的某个按钮绑定原声事件,。咱们能够调用内建的 this.$emit('自定义的事件名','传递的数据')，来向父级组件触发一个自定义的事件.

2.在父组件中的子组件标签中 要绑定自定义的事件,

全局组件的使用

Vue.component('全局组件的名字',{
 跟new Vue() 实例化对象中的options是同样，可是要注意：
 不论是公共组件仍是局部组件 data必须是个函数 函数必定要返回 {}
})

<slot> 元素做为承载分发内容的出口

过滤器的使用

局部过滤器

//1.注册局部过滤器 在组件对象中定义
filters:{
    '过滤器的名字':function(value){
    }   
}
//2.使用过滤器 使用管道符 | 
{{price  | '过滤器的名字'}}

全局过滤器

// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操做

Vue.filter('reverse',function(value) {    
    return value.split('').reverse().join('');
});

//使用跟 局部过滤器同样

计算属性computed和侦听器（watch）

侦听的是单个属性

watch:{

    数据属性的名字：function(value){

    },
    数据属性的名字2：function(value){

    }
}

侦听多个属性:计算属性 computed

{{str.split('').reverse().join('')}}

计算属性 :默认只有getter方法

data(){

  return {

    name:'alex',

    age:18

}

}

compuetd:{

      key:value

      计算属性的方法名:funtion(){

        return ${this.name}他的年龄是${this.age}岁

    }

}

var musicData = [

      {

        id:1,

        name:'于荣光 - 少林英雄',

        author:'于荣光',

        songSrc:'./static/于荣光 - 少林英雄.mp3'

      },

      {

        id:2,

        name:'Joel Adams - Please Dont Go',

        author:'Joel Adams',

        songSrc:'./static/Joel Adams - Please Dont Go.mp3'

      },

      {

        id:3,

        name:'MKJ - Time',

        author:'MKJ',

        songSrc:'./static/MKJ - Time.mp3'

      },

      {

        id:4,name:'Russ - Psycho (Pt. 2)',

        author:'Russ',

        songSrc:'./static/Russ - Psycho (Pt. 2).mp3'

      }

    ];

生命周期(钩子函数)

beforeCreate(){

    // 组件建立以前

    console.log(this.msg);

},

created(){

    // 组件建立以后

    // 使用该组件，就会触发以上的钩子函数，created中能够操做数据，发送ajax，而且能够实现vue==》页面的影响  应用：发送ajax请求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},

beforeMount(){

    // 装载数据到DOM以前会调用

    console.log(document.getElementById('app'));

},

mounted(){

    // 这个地方能够操做DOM

    // 装载数据到DOM以后会调用 能够获取到真实存在的DOM元素，vue操做之后的DOM

    console.log(document.getElementById('app'));

},

beforeUpdate(){

    // 在更新以前，调用此钩子，应用：获取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新以前，调用此钩子，应用：获取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},

beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},

activated(){

    console.log('组件被激活了');

},

deactivated(){

    console.log('组件被停用了');

}

$属性

$refs获取组件内的元素
$parent:获取当前组件的父组件
$children:获取当前组件的子组件
$root:获取New Vue的实例化对象
$el:获取组件对象的DOM元素

获取更新以后的dom添加事件的特殊状况

$nextTick 是在下次Dom更新循环结束以后执行的延迟回调，在修改数据以后使用$nextTick ，则能够在回调中获取更新以后的DOM