Vue总结1-基本使用和指令

2020-03-31  本文已影响0人  煤球快到碗里来

1.什么是vue，为什么要使用vue,vue的优势

 /*
  1.什么是Vue?
   Vue.js 是一套构建用户界面的`框架`，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、...)。

   2.框架和库的区别?
   框架：是一套完整的解决方案；对项目的`侵入性`较大，项目如果需要更换框架，则需要重构整个项目。
   库（插件）：提供某一个小功能，对项目的`侵入性`较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
   例如: 从jQuery 切换到 Zepto, 无缝切换
         从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可

   3.为什么要学习框架?
   提升开发效率：在企业中，时间就是效率，效率就是金钱；
   前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 ->  Vue / React / Angular

   4.框架有很多, 为什么要先学Vue
   Vue、Angular、React一起，被称之为前端三大主流框架！
   但是Angular、React是老外编写的, 所以所有的资料都是英文的
   而Vue是国人编写的, 所以所有的资料都是中文的, 并且Vue中整合了Angular、React中的众多优点
   所以为了降低我们的学习难度, 我们先学Vue, 学完之后再学习Angular和React

   5.使用Vue有哪些优势?
   5.1Vue的核心概念之一:
       通过数据驱动界面更新, 无需操作DOM来更新界面
       使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码,
       我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
   5.2Vue的核心概念之二:
       组件化开发，我们可以将网页拆分成一个个独立的组件来编写
       将来再通过封装好的组件拼接成一个完整的网页
       https://cn.vuejs.org/images/components.png
  */

2.vue基本模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Vue基本模板</title>
    <!--1.下载导入Vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 2.创建一个Vue的实例对象
    let vue = new Vue({
        // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
        el: '#app',
        // 4.告诉Vue的实例对象, 被控制区域的数据是什么
        data: {
            name: "twc"
        }
    });
</script>
</body>
</html>

3.数据单向绑定

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-Vue数据单向传递</title>
    <!--1.下载导入Vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model      数据模型(保存数据, 处理数据业务逻辑)
V : View       视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)

MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从   V -> VM -> M

2.Vue中MVVM的划分
Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model

3.Vue中数据的单向传递
我们把"数据"交给"Vue实例对象", "Vue实例对象"将数据交给"界面"
      Model  ->  View Model    ->   View
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "twc"
        }
    });
</script>
</body>
</html>

4.数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-Vue数据双向传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue调试工具安装
如果你能打开谷歌插件商店, 直接在线安装即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

由于国内无法打开谷歌国外插件商店, 所以可以离线安装
https://www.chromefor.com/vue-js-devtools_v5-3-0/

2.安装步骤:
2.1下载离线安装包
2.2打开谷歌插件界面
2.3直接将插件拖入
2.4报错 程序包无效: "CRX_HEADER_INVALID"
   可以将安装包修改为rar后缀, 解压之后再安装
2.5重启浏览器
-->
<!--
2.数据双向绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定

注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源
-->

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
    <input type="text" v-model="name">
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "twc",
            msg: "xxx"
        }
    });
</script>
</body>
</html>

5.常用指令

5.1 v-once指令

5.2 v-cloak指令

5.3 v-text 和 v-html

5.4 v-if v-else v-else-if

5.5 v-show

5.6 v-for

5.7 v-bind

5.8 v-bind 用来绑定类名

5.9 v-bind绑定样式

5.10 v-on

5.11 自定义指令

上一篇 下一篇

猜你喜欢

热点阅读