Vue 基础 day01

什么是Vue.js

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

1, 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱； 企业中，使用框架，能够提高开发的效率；
2, 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
3, 增强自己就业时候的竞争力; 人无我有，人有我优; 你平时不忙的时候，都在干嘛？

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

1. node 中的 express；

• 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

1. 从Jquery 切换到 Zepto
2. 从 EJS 切换到 art-template

Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别

• MVC 是后端的分层开发概念；
• MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
• 为什么有了MVC还要有MVVM

Vue 基本代码和MVVM之间对应

<!-- 导入Vue包 -->
<script src="./lib/vue-2.4.0.js"></script>
<!-- Vue 实例所控制的元素区域, 就是MVVM中的V view-->
<div id="app">
    <p>{{ msg }}</p>
</div>
<script>
    // 2. 创建Vue实例
    // 当我们导入包之后, 在浏览的内存中就存在一个 Vue 的构造函数
    // 注意: 我们new出来的vm对象, 就是对应MVVM中的VM 调度者 ViewModel
    var vm = new Vue({
        el: '#app', // 表示, 当我们new 的这个 Vue实例, 要控制页面上的那个区域
        // 这里的data 就是MVVM中的M 专门用来保存每个页面的数据 Model
        data: { // data 属性中, 存放的是 el中要用到的数据
            msg: '欢迎学习Vue' // 通过Vue提供的指令, 很方便的就能把数据渲染到页面上, 不再手动操作DOM 【类似于Vue的框架, 不提倡去手动操作DOM元素】
        }
    });

v-cloak, v-text, v-html 的使用

<style>
    [v-cloak] {
        display: none;
    }
</style>
<script src="./lib/vue-2.4.0.js"></script>
<div id="app">
    <!-- 使用v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>==={{ msg }}</p>
    <p v-text="msg">===</p>
    <!-- 默认 v-text 是没有闪烁问题的 -->
    <!-- v-text 会覆盖元素中原本的内容, 但是插值表达式 只会替换自己的这个占位符 -->
    <div v-html="msg2"></div> <!-- v-html 用来渲染html的内容 -->
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            msg2: '<h1>我是一个标题</h1>'
        }
    });
</script>

v-bind: 绑定属性

<div id="app">
    <!-- v-bind: 是Vue中, 提供用于绑定属性的指令 可以被简写为 :-->
    <!-- v-bind: 中, 可以写合法的JS表达式 -->
    <input type="button" value="button" v-bind:title="mytitle">
    <input type="button" value="button" :title="mytitle + 123">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytitle: '这是自己定义的title'
        }
    });
</script>

v-on:事件名 绑定事件

<script src="./lib/vue-2.4.0.js"></script>
<div id="app">
    <!-- Vue 中提供了 v-on: 事件绑定机制 缩写 @-->
    <input type="button" value="按钮" v-on:click="show">
    <input type="button" value="按钮" @click="show">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: { // 这个methods属性中定义了当前Vue实例中可用的方法
            show: function () {
                alert('Hello');
            }
        }
    });
</script>

事件修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .captrue 添加事件侦听器使用事件捕获模式
• .self 只当事件在该元素本身(比如不是子元素)时触发回调
• .once 事件只触发一次

<script src="./lib/vue-2.4.0.js"></script>
<style>
    .inner {
        height: 150px;
        background-color: darkcyan;
    }
    .outer {
        padding: 40px;
        background-color: red;
    }
</style>
<div id="app">
    <!-- 使用 .stop 阻止冒泡 -->
    <!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->

    <!-- 使用 .prevent 阻止默认行为 -->
    <!-- <a href="http://www.baidu.com" @click.prevent=linkClick>百度</a> -->

    <!-- 使用.captrue 实现捕获触发事件的机制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->

    <!-- 使用 .self 只有点击当前元素的时候才会触发事件处理函数 -->
    <!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->

    <!-- 使用.once 只触发一次事件处理函数 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once=linkClick>百度</a> -->

    <!-- 演示 self 和 stop 的区别 -->
    <div class="outer" @click="outer">
        <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>
    </div>

    <!-- self 只会阻止自己身上冒泡行为的触发, 并不会真正的阻止冒泡行为  -->
    <div class="outer" @click="outer">
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div1Handler() {
                console.log('触发了 inner div 的点击事件');
            },
            btnHandler() {
                console.log('触发了 input 的点击事件');
            },
            linkClick() {
                console.log('触发了 a 的点击事件');
            },
            outer() {
                console.log('触发了 outer 的点击事件');
            }
        }
    });
</script>

走马灯案例

<div id="app">
    <input type="button" value="浪起来" v-on:click="lang">
    <input type="button" value="低调" v-on:click="stop">
    <h4>{{msg}}</h4>
</div>
<script>
    // 在vm实例中 如果想要获取data上的数据或者想要调用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问, 这里的this就表示new出来的 vm对象
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "猥琐发育, 别浪~~",
            interval: null
        },
        methods: {
            lang() {
                if (this.interval) return;
                this.interval = setInterval(() => {
                    var start = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    // 重新拼接得到新的字符串 并赋值给this.msg
                    this.msg = end + start;
                }, 400);
                // 注意: vm实例会监听自己身上data中所有数据的改变, 只要数据一发生变化就会自动把最新的数据, 从data上同步到页面中去 好处: 只需要关心数据, 不要关心如何重新渲染DOM
            },
            stop() {
                clearInterval(this.interval);
                this.interval = null;
            }
        }
    });
</script>

Vue指令之v-model和双向数据绑定

<div id="app">
  <h4>{{msg}}</h4>
  <!-- v-bind: 只能实现数据的单向绑定, 从M自动绑定到V中 -->
  <input type="text" v-bind:value="msg">
  <!-- 使用v-model 可以实现 表单元素和model中实现数据双向绑定 -->
  <!-- 注意: v-model 只能运用在表单元素中 -->
  <!-- input, select checkbox textarea -->
  <input type="text" v-model="msg" style="width: 100%;">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello World'
    },
    methods: {}
  });
</script>

案例 简单计算器

<div id="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="=" v-on:click="calc">
  <input type="text" v-model="result">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      n1: 0,
      n2: 0,
      result: 0,
      opt: '+'
    },
    methods: {
      calc () {
        // 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;
        // }

        var codeStr = 'parseInt(this.n1)'+ this.opt + 'parseInt(this.n2)';
        this.result = eval(codeStr);
      }
    }
  });
</script>

在Vue中使用样式

使用class样式 : v-bind:

1.数组

<h1 :class=['red', 'thin']"> hello </h1>

1. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive ? 'active' : '']"> hello </h1>

1. 数组嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]"> hello </h1>

1. 直接使用对象 对象可以不带引号

<h1 :class="{red: true, italic: true, active: true, thin: true}"> hello </h1>

使用内联样式

1. 直接在元素上通过:style的形式, 书写样式形象 (如果属性带有 - 等其他字符 必须加引号)

<h1 :style="{color: 'red', 'font-size': '40px'}"></h1>

1. 将样式对象, 定义到data中, 并直接引用到 :style 中

// data中定义样式
data: {
    h1StyleObj: {color: 'red', 'font-size': '40px'}
}
// 元素中绑定属性
<h1 :style="h1StyleObj"> hello </h1>

1. 在:style中通过数组, 引用多个data上的样式对象

data: {
    h1StyleObj: {color: 'red', 'font-size': '40px'},
    h1StyleObj2: {font-style: 'italic'}
}
// 元素中绑定属性
<h1 :style="[h1StykeObj, h1StyleObj2]"></h1>

Vue指令之v-for和key属性

1. 迭代数组

<ul>
    <li v-for="(item, i) in list">值:{{item}} --- 索引: {{i}}</li>
</ul>

1. 迭代对象中的属性

<ul>
    <li v-for="(key, val, i) in obj">键: {{key}} --- 值: {{val}} --- 索引: {{i}}</li>
</ul>

1. 迭代数字

<p v-for="item in 10">this is {{item}} tag</p>

2.2.0+的版本里, 当在组件中使用v-for时, key是必须的

<div id="app">
  ID: <input type="text"  v-model="id">
  name: <input type="text" v-model="name">
  <input type="button" value="提交" v-on:click="add">
  <ul>
    <li v-for="item in list" v-bind:key="item.id">
      <input type="checkbox" name="" id="">
      ID: {{item.id}} ======== name: {{item.name}}
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      id: '',
      name: '',
      list: [
        {id: 1, name: '猴子'},
        {id: 2, name: '杨戬'},
        {id: 3, name: '哪吒'},
        {id: 4, name: '金角'},
        {id: 5, name: '银角'}
      ]
    },
    methods: {
      add () {
        this.list.unshift({id: this.id, name: this.name});
      }
    }
  });
</script>

Vue指令之 v-if v-show

    <input type="button" value="button" @click="flag = !flag">
    <!-- v-if 特点: 每次都会重新删除或创建元素 -->
    <!-- v-show 特点: 每次不会重新进行DOM的元素和创建操作, 只是切换了元素的display:none样式 -->
    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show有较高的初始渲染消耗 -->
    <p v-if="flag">这是v-if的标签</p>
    <p v-show="flag">这是v-show的标签</p>

相关文章

1. vue.js 1.x 文档
2. vue.js 2.x 文档
3. String.prototype.padStart(maxLength, fillString)
4. js 里面的键盘事件对应的键码
5. Vue.js双向绑定的实现原理