Vue.js

Vue简介：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的安装：

1.官方网站下载：https://cn.vuejs.org/

2.CDN下载:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

3.NPM下载：
通过命令行窗口进行全局安装:
$ npm install vue

使用
<script type="text/javascript">
        let app = new Vue({
            el: "#app",    //element   挂载节点
            data:{
                message:'hello world!',
                title:"first  page"
            }
        });
        
        console.log(app.message)
</script>

使用：

1. {{ value_name }}
2. v-bind:attr="value_name"
Vue指令

v-bind : 将数据与属性绑定
v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】
<div v-bind:class="{ active: isActive }"></div>
v-if : 条件判断 v-else v-else-if 用于控制标签的显示
<h1 v-if="awesome">Vue is awesome!</h1>
v-for : 循环遍历
v-for="value in value_name" {{value}}
v-model :双向绑定 ， 视图和数据相互影响

image.png

v-on : 事件绑定 处理事件 简便写法 ： @ @click

​比如 ： v-on:click = "function"

v-else:v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
</div>
<div v-else-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>
Vue实例

el: 挂载节点，一般作为vue创实例的第一个参数

<script type="text/javascript">   
let app = new Vue({      
el:'#app', //挂载的虚拟节点  
</script>

​ app.$el

​ 如果没有el指定节点，需要使用vm.$mount()主动挂载

template: 视图模板
打印数据及给html设置得css样式

<div id="app">
    <div  v-text="htmlstr"></div>
</div>

<script>
        let app = new Vue({
            el:"#app",
            data:{
                htmlstr:`<p style="color:red"> 这是个段落 </p>`,
            }
        });
    </script>

data: vue的数据，实例会将这些属性添加在vue的响应式系统中。

//第一种方法:
let vm=new Vue({
    data:{a:1,b:2,}, 
})

//第二种方法:
let vm=new Vue({
    data(){return {a:1,b:2,}}, 
})

​ 注意：当这些数据改变时，视图会进行重渲染。

​ 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的

​ 实例的$watch可以监听数据值的变化。

app.$watch('message',function(new_value,old_velue){
        console.log('变化了')
})
8个生命周期钩子函数

会在vue实例运行在相应阶段自动调用的。


image.png

beforeCreate：在实例初始化之后，**数据观测(data observer) ** 和 event/watcher事件配置 之前被调用，注意是 之前，此时data、watcher、methods统统滴没有。

created: 在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，el属性目前不可见。此时this.el属性目前不可见。此时this. el属性目前不可见。此时 this.el属性目前不可见。此时this.data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。

beforeMount: 在挂载开始之前被调用，相关的 render 函数 首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined。
，页面渲染时所需要的数据，应尽量在这之前完成赋值。

mounted: 以及产生虚拟dom，并且以及将页面的el进行了替换

beforeUpdate： 进行虚拟dom更新之前，每一次数据变化都会产生

updated： 更新成功之后的钩子函数

deforeDestory: vm实例摧毁之前

destoryed: vue实例已经被摧毁。

methods: 指定vue实例需要使用的方法。

computed：与data里面的数据是有趣别的，computed是根据data里面的数据变化进行变化的。

模板语法
  • 如何使用简单的vue数据

  1. 进行简单的页面渲染

    {{ value_name }}

  2. 将变量使用到HTML属性中

​ 属性绑定： v-bind 简写 :

​ v-bind:src="url"

​ :src="url"

  • 如何在HTML标签中显示HTML代码

​ v-html: 会将字符串解析成html

​ v-text: 会将字符串直接按照普通文本输出

  • 指令

    vue使用v-* 表示指令 ，指令后面需要绑定一个参数。并且只能绑定一个参数。

    v-bind:title

    v-if=""

    修饰符：

    ​ prevent: 阻止事件的默认行为

    stop: 阻止事件冒泡

  • 缩写

    v-bind 可以缩写为 ：

    v-on 可以缩写为 @

计算属性

属性： data里面的数据称之为属性，

方法： methods里面的函数称之为方法。

计算属性： 进过计算获取的属性。computed指定。

监听属性：监听data属性的变化，watch指定，监听的函数有两个参数，第一个是新值，第二个是旧值。

类的绑定与样式的绑定

可以使用对象 常用

也可以使用数组

条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

v-else：条件成立的时候不显示 ，配合v-if使用

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if： 条件成立的时候显示，配合v-if使用

注意： 条件渲染内部会根据标签的内容进行最小替换，也就是有可能发生不替换标签只替换属性的可能，如果想要一定替换标签，需要添加key‘的属性。这个属性是唯一值。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

v-if: 操作的是display ： block | none;

v-show: 虽然操作的也是display，但是类似于操作的是visibility： visable | hidden；会有一个行间的display:none。

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：

使用npm：
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

案列：

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,204评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,091评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,548评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,657评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,689评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,554评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,302评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,216评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,661评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,697评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,306评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2赞 355