终于还是逃不过学vue，那么就愉快开始吧！

1.什么是Vue.js?ue.js?
Vue.js 是目前最火的一个前端框架,react是目前最流行的一个框架，均可与用于开发手机app。
Vue 是前端的主流框架之一，和angular.js和react.js一起，并称为前端三大框架。
前端的主要工作：主要负责MVC中V这一层，主要工作是和界面打交道，来制作前端页面。

2.为什么要学习前端框架，以及框架和库的区别？
为了提高效率(减少不必要的dom操作，增加渲染的效率)，通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不在区关心dom的渲染。 核心概念：让用户不再去操作dom，解放双手。

框架：是一套完整的技术解决方案，对项目的侵入性比较大，项目如果开发到后期，重新改变项目，需要重构项目。 例如： node中的express框架；
库：(插件) 提供一个小功能，对项目的侵入性小，如果某个库无法完成某些需求，则可以调用其他库。（jquery库）
3.node中的M(model)V(view)C(业务逻辑)和前端中的MVM区别

：：：MVC是后端的分层开发概念
app.js --> router --> controller --> model
view: 当用户操作了界面，如果要进行业务的处理，都会通过网络请求区请求后端的服务器，
此时我们的请求就会被后端的app.js监听到。

：：：MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V，和VM，其中VM，是MVVM的思想的核心。
M(保存每个页面中单独的数据)
VM(是一个调度者，分隔了M和V)
V(页面中的HTML结构)
数据的双向绑定：
VM 从 v层获取数据保存到VM自身，然后M层从VM调取数据存进自身。
4.vue的基本代码和解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div class="app">
        
    </div>
</body>
<script>
    var vm = new Vue({
        el:".app",
        data:{

        },
        methods:{

        }
    })
</script>
</html>

   解析：第一步首先引入vue，创建我们vue实例要控制的区域，即上述代码中的class名为app的div，之后创建vue实例。
   其中vue实例中会有几个方法：
   1.el
     要控制的区域  按css的方法拿到该div
   2.data
     要传递进去的数据
   3.methods
    实例上要定义的方法

5.三个指令（v-cloak,v-text,v-html）

 		v-cloak: 依托服务器渲染页面 会先出现{{msg}} -- > data数据 解决闪烁问题

        v-text: 类似于插值表达式 渲染数据
        
        v-text  和 {} 区别：

        1.v-text  没有闪烁问题
        2.<p v-cloak>++++++{{msg}}</p>
          <h2 v-text = "msg">+++++</h2>
          v-text 会覆盖元素中原本的内容，但是插值表达式只会替换当前的占位符，不会
          把整个元素的内容清空。
        3. <p v-cloak>{{msg2}}</p>
        <h2 v-text = "msg2"></h2>

        v-text 和 {{}} 的方式都是吧标签h1当作普通文本渲染到页面上。

        4.v-html  可以将h1渲染为html骨架元素(也会覆盖原有元素的value)

                 <h2 v-html = "msg2"></h2>

6.v-bind指令绑定属性

 <button v-bind:title="mytitle">按钮</button>

7.v-on指令绑定事件

  <input type="button" value="按钮" v-on:click = "show">

一个简单的vue文字跑马灯效果的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入vue包 -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 2.创建可控制的区域 -->
    <div class="app">
        <p>{{ msg }}</p>
        <input type="button" value="动起来" v-on:click="active">
        <input type="button" value="停止" v-on:click = "stop">
    </div>
</body>
<script>
    //注意在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据
    //属性名,或者this.方法名,来进行访问.
    var vm = new Vue({
        el:".app",
        data:{
            msg:"今天天气很好,但是下雨了~~~~",
            intervalId:null,
        },
        methods:{
            active:function(){
                // console.log(this.msg);
                //获取头的第一个字符
                //外部的this指向vm实例
                //判断定时器是否开启了多次
                if(this.intervalId != null){
                    return;
                }else{
                    this.intervalId = setInterval(()=>{
                    //访问的是data上的intervalID要加this
                var start = this.msg.substring(0,1);
                //获取后面的所有字符
                var end = this.msg.substring(1);
                //重新凭借当前的字符串,并且赋值给 this.msg
                this.msg = end + start;
                },500)
                }
               
                //ES6 箭头函数把this指向外部
                //vm会监听自己身上data数据的改变,只要数据一发生变化就会自动把新数据从data
                //同步到页面中去
            },
            stop:function(){
                clearInterval(this.intervalId);
                this.intervalId = null;
            }
        },
    })

    /*
    *分析：1.给动起来绑定一个点击事件  v-on
           2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg，进行截取操作.
           3.把第一个字符截取出来放在最后一个位置.
           4.实现点击一下按钮自动截取的功能,需要把2步走中代码放进定时器.

    */
</script>
</html>

8. v-on缩写和事件修饰符

### .stop阻止冒泡 
        <div class="app">
        <div class="inner" v-on:click = "divhandler">
            <input type="button" value="点我" v-on:click = "btnhandler">
            <!-- 造成了事件冒泡:防止冒泡的时间修饰符  .stop -->
        </div>

        <input type="button" value="点我" v-on:click.stop = "btnhandler">

### .prevent阻止默认行为
         <a href="http://www.baidu.com" @click.prevent="aclick">有问题,先去百度</a>


### .capture 事件捕获机制
        <div class="inner" v-on:click.capture = "divhandler">
                <input type="button" value="点我" v-on:click = "btnhandler">
            </div>
        触发的是捕获机制

### .self 只有点击我自己才触发我身上的事件  不会被冒泡到我身上
        <div class="inner" v-on:click.self  = "divhandler">
                <input type="button" value="点我" v-on:click= "btnhandler">
            </div>
        防止了冒泡事件触发我身上的不相执行的事件


### .once   只执行一次
        <input type="button" value="点我" v-on:click.once= "btnhandler">
        只触发一次事件处理函数
        
##### .stop阻止了所有冒泡     .self只阻止(调用.self方法)的冒泡

9.指令v-model 和 双向数据绑定

在console控制台修改msg会直接同步到页面上去,(不用刷新)
        
        
        <input type="text" v-bind:value="msg">
        <!-- v-bind只能实现数据䣌单向绑定,从M绑定到V,无法实现数据的双向绑定 -->
        

        v-model指令可以实现表单元素和model中数据双向数据绑定
        (v-model只能用于表单元素中去)

案例：简易计算器的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="text" v-model='n1'>

        <select name="" id="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <input type="text" v-model='n2'>
        <input type="button" value="=" @click = "calc">
        <input type="text" v-model="result">
    </div>
</body>
<script>
    var vm = new Vue({
        el:".app",
        data:{
            n1:"0",
            n2:"0",
            result:"0",
            opt:'+'
        },
        methods:{  //计算器算数的方法
            //逻辑,判断操作符
            calc:function(){
                switch(this.opt){
                    case "+":
                        this.result = parseInt(this.n1) + parseInt(this.n2);
                        break;
                    case "-":
                         this.result = parseInt(this.n1) - parseInt(this.n2);
                        break;
                    case "*":
                         this.result = parseInt(this.n1) * parseInt(this.n2);
                        break;
                    case "/":
                         this.result = parseInt(this.n1) / parseInt(this.n2);
                        break;
                }
            }
        }
    })
</script>
</html>

10.在网页中使用样式

 原本的样式绑定的方式:
          <h1 class="red thin italic">欢迎来到vue.js,learning makes me 哈皮!</h1>
        
        vue中样式的绑定方式:
       

        第一种方式:直接传递一个数组,class需要v-bind绑定 v-bind: 添加属性
        1.["类名"]  eg:["red thin"]
        
        eg: <h1 v-bind:class="['red','italic','thin']">欢迎来到vue.js!</h1>



        第二种方式: 在数组中使用三元表达式
        2.data中加入开关flag,数组中使用三元表达式进行判断

        eg: <h1 v-bind:class="['italic','thin',flag ? 'red':'']">欢迎来到vue.js!</h1>

        
        第三种方式: 在数组中嵌套对象
        3.data加入flag进行判断,数组中嵌套对象,属性在前, 值在后

         <h1 v-bind:class="['italic','thin',{'red':flag}]">欢迎来到vue.js!</h1>

        
        第四种方式: 直接插入对象
        4.前面类名,后面标识符 v-bild绑定对象时,对象的属性时类名,属性可带引号,也可以不带
                属性的值时标识符.
        
        <h1 v-bind:class="classObj">欢迎来到vue.js,learning makes me 哈皮!</h1> 
        
        classObj : {red:true,thin:true,italic:false,active:false},

11.通过属性绑定为元素绑定style样式

第一种方式: 直接以键值对的形式给style添加属性
          <h1 v-bind:style="{color:'red','font-weigth':900}">welcome to vue.js</h1>
        
        
        第二种方式:
          <h1 v-bind:style="styleObj">welcome to vue.js</h1
         styleObj:{color:'red','font-weigth':900},

        第三种方式:
                将两种样式放在一个数组里,同时渲染
         <h1 v-bind:style="[styleObj1,styleObj2]">welcome to vue.js</h1>

          styleObj1:{color:'red','font-weigth':900},
            styleObj2:{background:'yellow','font-style':'italic'},

12.一些重要的v-指令

p17
##### vue指令之v-for和key属性

        <!-- 注意在遍历对象身上的键值对的时候,除了有 val 和 key,在第三个位置还有一个索引 -->
        <p v-for="(value,key,i) in user">{{value}} --- {{key}}----{{i}}</p>

        数组
        <p v-for="(user,i) in list">索引是:{{i}}---id:{{user.id}} --- name:{{user.name}}</p>

        循环遍历数字:
         <p v-for='count in 10'>这是第 {{count}} 次循环</p>

         v-for迭代数字:起始是从1开始

p18
##### v-for 中 key的问题
        v-for循环的时候,key属性只能使用 number 获取 string
        只能使用v-bind 属性绑定的形式指定key的值
        item身上的id是唯一的.

        以后都这样写:<p v-for='item in list' :key="item.id">
        保证数据的唯一性:

        在组件中使用v-for循环的时候,或者在一些特殊的情况中如果有问题,
        必须指定唯一的字符串.数字类型  :key值

p19
##### v-if  和  v-show 的 使用


        当v-if 和 v-show 均为false时

        v-if每次都会重新删除或者创建元素(有较高的切换性能消耗)

        v-show 不会进行dom的删除操作 (有较高的初始渲染消耗)
        
        只是切换了元素的 display:none 样式

        如果元素涉及到频繁的切换,最好不要使用 v-if
        如果元素永远不会显示出来被用户看到,最好使用v-if
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区