Python day35_Vue

Vue.js 简介

Vue.js读音 /vjuː/, 类似于 view

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

首先通过将vue.js作为一个js库来使用，来学习vue的一些基本概念，我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js

<script type="text/javascript" src="js/vue.min.js"></script>

Vue实例

每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：

<script> 部分：
<script src="./js/vue.js"></script>
    <script>
        window.onload = function(){
            //创建vue实例
            var vm = new Vue({
                //javascript对象中 el属性对应一个标签
                //当vue对象创建后，这个标签内的区域就被vue对象接管，这个区域内就可以使用vue对象中定义的属性和方法
                el:'#app',
                //data对应的属性值 会根据响应随时更新
                data:{msg:'hello world'},
                //methods定义一个方法 可以通过方法动态改变vue实例data对象中的数据
                methods:{
                    //方法名：方法
                    fnChange: function(){
                        //this 在方法里指向当前 Vue 实例
                        this.msg += '初学vue';
                    }
                }
            })
        }
    </script>

<body>部分
<body>
    //被接管的标签 也就是视图
    <div id="app">
    //mustanche 语法 表示 标签的属性要使用值
      <p>{{msg}}</p>  
    //@click 后面会提，v-on指令的简写,当发生点击事件的时候会调用fnchange对应的函数 改变数据
      <input type="button" value=" 改变值" @click = "fnChange">
    </div>
</body>

Vue.js模板语法

模板语法指的是如何将数据放入html中

插入值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

插入的值还可以表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} //经常会用到三元表达式
{{ message.split('').reverse().join('') }}

如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令：

<a v-bind:href="url" v-bind:title='tip'>百度网</a>

指令

指令 (Directives) 是带有“v-”前缀的特殊属性，指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响

  1. v-bind :简写就是一个冒号，作用于标签的属性
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>

  1. v-on：简写就是一个@,作用于事件

         <!-- 完整语法 -->
 <button v-on:click="fnChangeMsg">按钮</button>
 
 <!-- 缩写 -->
 <button @click="fnChangeMsg">按钮</button>

  2. v-if /v-if v-else/v-else-if/v-show 条件渲染

v-if可以控制元素的创建或者销毁

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

v-else-if，顾名思义，充当 v-if的“else-if 块”，可以连续使用

v-show 指令。用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的

例子：

script 部分：

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#app',
            data:{
                isShow:false,
                code:'D'
            }
        })
    }  
</script>

body 部分：

<body>
    <div id="app">
        <p v-if = "isShow">这是使用v-if的段落</p>
        <p v-else>这是使用v-else的段落</p>
        <p v-show = "isShow">这是使用v-show的段落</p>
        <p v-if ="code=='A'">A</p>
        <p v-else-if="code=='B'">B</p>
        <p v-else-if="code=='C'">C</p>
        <p v-else>D</p>  

    </div>
</body>

Class 绑定

使用v-bind指令来设置元素的class属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组

对象语法

1. class的值传一个字典

div部分：
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
data 属性值如下：
data: { isActive: true, hasError: false }

最终渲染的效果：
<div class="static active"></div>

2. class 的值传一个对象引用

div部分：
<div v-bind:class="classObject"></div>

data属性值：

​ data: { classObject: { active: true, 'text-danger': false } }

3. class 的值传一个数组 以应用一个class列表

div部分：
<div v-bind:class="[activeClass, errorClass]"></div>

data属性值：

data: { activeClass: 'active', errorClass: 'text-danger' }

最终渲染效果：

<div class="active text-danger"></div>

4. class 的值传一个三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

列表渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名

1. 遍历数组

    //script 部分
    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#app',
            data:{
                aList:['红海','复仇者联盟3','喜羊羊与灰太狼','海绵宝宝']
            }
        })
    }
    </script>

//body 部分
<body>
    <div id="app">
        <ul>
            <!--数组可以传参，第一个是元素，第二个是下标-->
            <li v-for='(item，index)in aList'>{{index}}-{{item}}</li>
        </ul>
    </div>
</body>

2. 遍历对象

    //script部分
    <script>
        window.onload = function(){
        var vm = new Vue({
            el:'#app',
            data:{
                person:{name:"张山",age:18,gender:"男"}
            }
        })
        }
    </script>

    <!--body 部分-->  
    <body>
        <div id="app">
            <ul>
                <!--字典可以传参，第一个是值，第二个是键-->
                <li v-for='(item,key) in person'>{{key}}:{{item}}</li>
            </ul>
        </div>
    </body>

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数

事件修饰符

事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在vue.js可以加上事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

表单输入绑定 双向数据绑定

可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

适用 v-mode：

1. 单行文本框

2. 多行文本框    

3. 复选框

4. 单选框

5. 下拉框

计算属性和侦听属性

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

例如 字符串反转的表达式直接在写在模板中就会过长

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这种带有复杂逻辑的表达式就可以使用计算属性了 关键字：computed

      //计算属性
        computed:{
            reversemsg:function(){
                //this 指向的是vm实例
               return this.msg.split('').reverse().join('')
            }
        },

侦听属性

侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

            //侦听属性
            watch:{
                iNum:function(newval,oldval){
                    console.log(newval,oldval)
                }
            }

过滤器

Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ prize | RMB }}

<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>

  1. 过滤器实际上是一个函数，可以在一个组件的选项中定义组件内部过滤器

  2. 可以在创建 Vue 实例之前全局定义过滤器

  3. 过滤器分为全局使用和局部使用

举个栗子：

script 部分：
<script>
    window.onload = function(){
        //在创建vue实例之前全局定义过滤器， Vue 是一个类 此时的Yuan 是可以全局使用
        Vue.filter('Yuan',function(val){
            if (val==''){
                return
            }
            return val+'元';
        })
        var vm = new Vue({
            el:'#app',
            data:{
                price:99.99
            },
            //在一个组件的选项中定义组件内部过滤器 只能在定义它的对象接管标签中使用
            filters:{
                RMB:function(val){
                    if (val==''){
                        return;
                    }
                    return '￥'+val
                }
            }
        })
        var vm2 = new Vue({
            el:'#app2',
            data:{
                price:88.8
            }
        })
    }
</script>

body 部分:
<body>
    <div id="app">
        <p>商品的价格是：{{price|RMB|Yuan}}</p>
    </div>
    <DIV id="app2">
        <p> 商品的价格是：{{price | RMB | Yuan}}</p>
    </DIV>
</body>

上面例子的运行结果 ：

商品的价格是：￥99.99元

商品的价格是：88.8元

实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程,在这个过程中会自动运行一些叫做生命周期钩子的函数, 我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。

  1. beforeCreate :在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

  2. created :在实例创建完成后被立即调用, 在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始

  3. beforeMount :在挂载开始之前被调用：相关的 render 函数首次被调用

  4. mounted :实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作 (常用)

  5. beforeUpdate：数据发生变化前调用

  6. updated：数据发生变化后调用

数据交互

vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

数据交互 可以使用python 实现前后端分离做一个网页（具体以后会整理）

ES6语法

ES6是JavaScript语言的新版本，它也可以叫做ES2015，ES6在ES5的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。

变量声明let和const

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const声明的常量，不可修改

箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题

匿名函数：

var fnAdd = function(a,b){
    var sum1 = a+b;
    alert(sum1)
}
fnAdd(3,5)

箭头函数：

var fnAdd = (a,b)=>{
    var sum1 = a+b
    alert(sum1)
}
fnAdd(3,5)

模块导入import 和导出export

javascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，和python语言一样，python中一个文件就是一个模块，ES6中，一个js文件就是一个模块，不同的是，js文件中需要先导出(export)后，才能被其他js文件导入(import)

目前ES6的模块功能需要在服务器环境下才可以运行

    // model.js文件中导出
    var person = {name:'tom',age:18}
    export default {person}
    
    // index.js文件夹中导入
    import person from 'js/model.js'
    
    // index.js中使用模块
    person.name
    person.age
    
    /*
    上面导出时使用了default关键字，如果不使用这个关键字，导入时需要加大括号：
    import {person} from 'js/model.js'
    */

对象的简写

javascript对象在ES6中可以做一些简写形式，了解这些简写形式，才能方便我们读懂一些在javascript代码中简写的对象

上代码：

非简写方式：

let name = '张三';
let age = 18;

/*
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/

简写方式：

let name = '张三';
let age = 18;
var person = {
name, <!--变化1-->
age,  <!--变化2-->
showname(){  <!--变化3-->
  alert(this.name);
},
showage(){ <!--变化4-->
  alert(this.age);
}
}

vue组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子

  1. 注册以及使用组件

  2. data 属性必须是一个函数

因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数来返回值。

  1. props 传递数据

如果想给组件中传递参数，组件要显式地用 props 选项声明它预期的数据

script部分

<script>
    window.onload = function(){
        //定义一个组件
        Vue.component('breadcrumb',{
        //prop传递参数 组件要显式地用props选项声明它预期的数据
        props:['pos'],
        // 设置类属性 以及点击事件
        template:'<div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">当前位置是：首页&gt;{{pos}}</div>',
        //data属性必须是一个函数 达到多次复用以及数据的相对独立
        data:function(){
            return {
                isHot:false
            }
        }
    })
    var vm = new Vue({
        el:'#app'
    })
    }
</script>

body 部分

<body>
    <div id="app">
        <!-- 使用组件 组件只能用到vue对象中  -->
        <breadcrumb pos='新闻'></breadcrumb>
        <breadcrumb pos='娱乐'></breadcrumb>
        <breadcrumb pos='体育'></breadcrumb>
    </div>
</body>

单文件组件

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”

创建一个myvue01.vue的单文件组件

代码结构如下：

// 使用template标签来定义html部分
<template>
    <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">当前位置是：首页&gt;{{pos}}</div>
</template>
//javascript (js) 部分要写成模块导出的形式
//将props部分以及data部分放入js
<script>
export default {
    props:['pos'],
    data:function(){
        return {
            isHot:false
        }
    }
}
</script>
//css 样式放入style中
<style>
     .crumb{
            width: 90%;
            margin: 0px auto;
            line-height: 50px;
            border-bottom: 1px solid #ddd;
        }
        .hot{
            font-weight: bold;
            color: red;
        }
</style>

怎么使用呢？请看下节分享

Vue组件开发自动化工具

1、Node.js

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，安装node.js的目的是，vue的自动化开发工具是node.js编写的，要运行这些工具需要安装node.js

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

2、npm

npm是node.js的包管理器，安装了node.js同时会自动安装这个包管理器，可以npm命令来安装node.js的包。这个工具相当于python的pip管理器

3、安装vue的自动化工具

vue开发生态区提供了用node.js开发的自动化开发工具包，这个工具包可以帮我们编译单文件组件

// 全局安装 vue-cli
npm install --global vue-cli

生成Vue单页面应用项目目录

单页应用（SPA）

单页Web应用（single page web application，SPA），就是将系统所有的操作交互限定在一个web页面中。单页应用程序 (SPA) 是加载单个HTML页面，系统的不同功能通过加载不同功能组件的形式来切换，不同功能组件全部封装到了js文件中，这些文件在应用开始访问时就一起加载完，所以整个系统在切换不同功能时，页面的地址是不变的，系统切换可以做到局部刷新，也可以叫做无刷新，这么做的目的是为了给用户提供更加流畅的用户体验

生成项目目录

// 生成一个基于 webpack 模板的新项目
$ vue init webpack my-project

// 启动开发服务器 ctrl+c 停止服务
cd my-project
npm run dev

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件

预知后事如何 且看下回分解 哈哈 没整理完

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

推荐阅读更多精彩内容

  • Vue相关开源项目库汇总(史上最全)
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★13489 ...
    余生社会阅读 19,678评论 7赞 233
  • 「4.23」《平凡的世界Ⅱ》
    【Day42 orange】 “他读这些书，并不是指望自己也成为伟人。但他从这些书中体会到，连伟人的一生都充...
    王橘子啦阅读 421评论 0赞 0
  • 光阴的故事
    光阴的故事 午后的阳光穿过西面长方形的窗户，屋内的光线里浮动着若有若无的尘，空调的声音跟夏天一样，喧闹得近乎失聪。...
    尔峰阅读 319评论 3赞 2
  • 孤独症
    2011年到2015年，我仍然还有随手记的习惯，鸡零狗碎居多，除了预防青年痴呆写下的旅行笔记，我不再长篇大论，即使...
    苏马拉呱阅读 372评论 0赞 2