vue 学习小结 送给新手

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞