vue 学习小结 送给新手

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

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