vue 进修小结 送给新手

2024年2月13日 115次阅读 来源: 风吹一个大耳东

Vue 是如今最火的前端JavaScript 开辟框架。
起首，接收它的头脑
View 模板即html，静态界面
Model 数据源 模子 界面一切的数据担任供应及治理
Vue 担任将view 及 Model结合起来。

<div id="app">
    {{message}}
</div>
<script type="text/javascript">
    var exampleData = {
        message:'Hello World!'
    }
//exampleData 数据模子 数据和模板构成
    new Vue({
        el:'#app',
        data:exampleData
    })
</script>

id为app的一段html 即模板，内里有一个{{message}}表达式守候被添补 {{}} 两个大括号即Vue 表达式

var exampleData = {
        message:'Hello World!'
    }
    
    exampleData模子 供应了view 须要的数据message 
    vue 做什么呢？ 示知两边，View 的Model 在那里，
    Model 为哪一个view效劳
    
 new Vue({
        el:'#app',
        data:exampleData
    })

实例化一个Vue 设置参数 el指向html 元素
data参数指向数据

**MVVM
Model View ViewMode(vue,el,data)**

数据绑定是vue 最中心 也是最酷的一个才能。
我们能够将html 与数据绑定起来。 只需数据发作转变，html(view)马上更新，html由form表单等带来的数据转变，数据响应字段也会发作响应转变。即V-model
一 viewmodel关联
el:’#app’,data:{message:’hello world!’}
div#app{{message}}表达式就会显现数据模子model里的message的值 Hello world!

二 数据绑定
v-model将input 和 message绑在了一同，任何一方的转变都邑影响相互
比方：刚开始，message的值为hello world input value显现为hello world! 数据绑定了 input显现message的值
接着 input用户输入，value 发作了转变，关照数据message更新他的值，双向互通。

三 界面的更新
input的输入，致使message的值更新，#app元素内，任何表达式与message有关的，都将从新盘算，斌企鹅自动更新界面。
所以，<p>{{message}}</p>会显现出及时与input输入的值一样。

指令 绑定在html元素上，类似于属性的特别敕令，用于加强html的才能
v-if 表达式，true 则输出 false 不输出，页面上不会输出其html
v-model 双向数据绑定指令 主要用于form 表单，input 输入值会传给数据更新，数据更新会直接在界面数据上反应。

v-show 与v-if 一样 接收一个boolean 值得表达式，但不一样的处所
不论真心急啊都邑在页面上输出，只是style display:none 罢了。

MVVM中心做的是数据驱动的界面，假如数据是数组怎么办？
v-for 担任轮回输出数据到模板上，item in items
轮回的数组是 items 当前的对象是item
在轮回中item对象的一切属性都能够运用item.property挪用。
items 来自于vue 实例的data数据源
v-on指定 事宜监听指令
v-on:event_type=”function_name”
在vue 实例里有一个methods API 特地用于供应种种要领，
供html挪用

v-for=“（index,n） in 4”
轮回指令，实行 4次
index 当前的下标，n为当前的数字

v-bind:class=”{on:(tab==index)}”
简写:class
属性绑定指令，动态属性输出
比方.activ,.on

on:(tab == index)
on是要输出的类名，是常量，：右侧是表达式，假如为真
则输出左侧的类，
数据驱动的属性绑定 转变tab的值就能够，让第几个tab有on 这个类

v-on:mouseover = “setCurrent()”
增加DOM 事宜监听

methods:{
        setCurrent:function(index) {
        this.tab = index;
    }
}

component 组件
组件化头脑是mvvm 最主要的头脑，能够让网页像搭积木一样的来开辟。
react 作为组件化头脑的前驱 facebook 昔时统计的组件多达5w多个。
长处是：
1 复用 组件化开辟的历程就是一个拔取组件拼装的历程
2 易保护 一个组件过期了或许有新的需求直接下架（可拔插）
3 合作 一个开辟者担任本身的一些组件
组件化开辟合适大型运用

组件语法

 <body>
     
        <my-component></my-component>
     
    //定义一个组件名为my component
    Vue.component('my-component',{
        //template 属性 组件的html
        template:'<div>A custom component!</div>'
    })

定义在vue实例化之前

Vue.component(‘组件称号’，option)
template 属性是基础属性，用于设置组建的模板，即view
data,methods 等等，实在它跟Vue实例一样，具有那些庞杂的功用

表现
组件的名字 能够像自定义的html元素一样，插进去html文档，扩大html的功用
本质上组件就是一堆html代码的鸠合，除了html以外，另有数据集交互逻辑，让这个组件变得功用强大.
底本的html太简朴 功用太瘠薄。

长处：运用的直观性

组件时属于实例的 也多是属于其他组件的。
父组件，子组件。。。 组件之间有关联
组件末了经由过程自定义html的情势挂到vue实例上去 或父组件上去

components 属性 子组件的鸠合，
语法是一个json对象

var vm = new Vue({
  el:'#app',
  data:{
  },
  components:{
      'my-component':Child
  }
})

my-component 是我们给组件取的别号，html内插进去的就是这个名字
Child是我们的组件。

组件内数据的声明 与vue 实例数据的声明有些差别，必需为函数

data:function(){
        return{
        message:'hello'
    }
}

return 返回一个json 对象

filter 过滤去
在开辟中 常常有如许的需求 数据库中寄存的是原始数据，离我们显现的需求，还差那末一点点。
或许是数据须要全部容，换个情势，filter担任
数据在 | 管道 后将由一个函数来化装

组件或许实例中 有一个属性filters 内里安排filter函数在vue2.0之前 默许供应一些经常使用的过滤器，比方capitalize sortBy
Vue 2.0今后须要自行定义。
能够自行定义，数据末了显现的体式格局。

声明周期函数
组件有他的声明周期，即建立前后，烧毁前后
在设置选项中有一些预定义的性命周期函数钩子，就在响应的周期那一刻会触发。
比方常常会在组件加载完成后,提议数据要求ajax
放在created 要领中
在组件烧毁前解绑数据源。

v-html 指令用处：用于将数据显现为html而不是字符串

Ajax
异步无革新 网页手艺，通经常使用于阅读器JavaScript 主意向
后端要求数据 并及时更新界面的操纵中

Ajax 工程师 RIA富互联网运用开辟工程师

传统要求 同步
HTTP 要求的历程
网友在阅读地点里输入url要求后，剖析DNS IP地点找到网页地点的效劳器。
关照效劳器，须要这个页面的html
效劳器收到要求指令后，去数据库里掏出数据，动态衬着html模板，末了经由过程与网友的衔接
,将网页字符串发送给阅读器，我们就看到网页了

Ajax 异步要求
与同步要求差别，Ajax 是在网页已衬着，跟效劳器断开衔接后，客户端JavaScript 经由过程用户点击事宜（换一批）鼠标转动（下一页）主意向效劳器端要求数据
而且并非一向守候效果再实行，而是在效劳器端接到指令后，完成运算由效劳器端异步的挪用callback来继承 实行页面逻辑{动态DOM操纵}
效劳器胜利实行，挪用callback,
失利，挪用error 不会革新页面的就是ajax

一 阅读器原生的异步要求对象 XMLHttpRequest
XML 数据的花样 如今主如果JSON
HttpRequest javascript 发出http要求的才能
流程

1 翻开要求，这是并没有真正发送要求 而是去做了http握手
xhr.open(‘GET’,URL);
URL 是效劳器端供应给你取数据的地点，是预定好的。
效劳端只须要根据前端的需求，准备好数据，并在预定的地点（URL）,
以JSON的花样返回给用户即可

2 定义回调

xhr.onload = function() {
        xhr.responseText;
}

xhr 要求后效劳器端返回的数据，会异步赛道xhr.responseText属性内里。
JSON.parse()将返回数据变成json 对象
xhr.send()真正发送要求

xhr的长处在于，带来了web2.0反动，传统了的要求，页面是静态的，枯燥的
而xhr时期的页面是动态的，富交互的，

$.getJSON(url,params,function(data){
        
});
$.post(url,params,function(data){
        
});

日常平凡我们不会去直接用XMLHttpRequest

input radio 切换后，ajax 的数据操纵由watch 要领来担任

watch:{
        propertypeName:'函数名'
}
    原文作者：风吹一个大耳东
    原文地址: https://segmentfault.com/a/1190000006794704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞