一：概述

Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Soc：

Html+Css+Js    视图：给用户看，刷新后台给的数据

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

二：第一个VUE程序

<body>

  <div id="app">

      //这里直接就显示数据

    {{message}}

  </div>

<script>

    var  vm=new  Vue(

       //el绑定标签，data是指数据

        el: "#app",// 设置当前vue对象要控制的标签范围

        data;{// data是将要展示到HTML标签元素中的数据。

            message: "hello,vue"

    });

</script>

</body>

Vue有七大对象：el，data

Vue就是一个实现了MVVM的

为什么要使用MVVM

MvvM模式和MVC模式一样，主要目的是分离视图View和模型Model，有几大好好处

·低耦合：视图View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

·可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑

·独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计。

·可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

三：Vue的基本语法

v-bind

我们已经成功创建了一个Vue应用，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量的工作。现在数据和Dom已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面也可以实时更新。

我们还可以使用v-bind来绑定元素特性。

<body>

  <div id="app">

    <span v-bind:title="message">

        鼠标悬停几秒中查看此处动态绑定的提示信息

    </span>

  </div>

<script>

    var  vm=new  Vue(

       //el绑定标签，data是指数据

        el: "#app",

        data;{// data是将要展示到HTML标签元素中的数据。

            message: "hello,vue"

    });

</script>

</body>

你看到的v-bind等被称为指令。指令带有的前缀v-，以表示他们是Vue提供的特殊特征。可能你已经猜到了，他们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是：‘’将这个元素节点的title特性和Vue实列的message属性保持一致”

如果你再次打开浏览器的JavaScript控制台，输入app.message=‘’新消息”，就会再次看到这个绑定了title特性的html已经进行了更新。

v-if，v-else

什么是条件判断语句，就不需要我们所明了吧，一下俩个属性！

·v-if

<body>

  <div id="app">

      <h1 v-if="type==='A'">A</h1>

      <h1 v-else-if="type==='B'">C</h1>

      <h1 v-else>C</h1>

  </div>

<script>

    var  vm=new  Vue(

       //el绑定标签，data是指数据

        el: "#app",// 设置当前vue对象要控制的标签范围

        data;{// data是将要展示到HTML标签元素中的数据。

            type：'A';

    });

</script>

</body>

·v-else

<body>

  <div id="app">

      <li v-for="item  in  items">

          //这里的item in items就好比我们的for each一样，这里的item就是底下的一个

          {{item.message}}

      </li>

  </div>

<script>

    var  vm=new  Vue(

       //el绑定标签，data是指数据

        el: "#app",// 设置当前vue对象要控制的标签范围

        data;{// data是将要展示到HTML标签元素中的数据。

           items：[

            {message: '123'},

            {message: '456'},

            {message: '789'},

        ]

    });

</script>

</body>

四：Vue绑定事件

v-on

<body>

  <div id="app">

      <button v-on:click="zph">click me</button>

  </div>

<script>

    var  vm=new  Vue({

       //el绑定标签，data是指数据

        el: "#app",// 设置当前vue对象要控制的标签范围

        data：{// data是将要展示到HTML标签元素中的数据。

           message：'123'

    },

    methods: {//方法必须定义在Vue的Methods对象中，v-on事件

            zph: function (event) {

                  alert(this.message)

            }

    }

    });

</script>

</body>

Vue的7个属性，8个方法，7个指令。787原则。

·el属性  用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。

·data属性 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

·template属性 用来设置模板，会替换页面元素，包括占位符。

·render属性 创建真正的Virtual Dom

·watch属性  watch： function（new ，old）{}  监听data中数据的变化    俩个参数，一个返回新值，一个返回旧值

五：Vue 表单双绑，组件

①.什么是双向数据绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

②为什么要实现数据的双向绑定

在vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI空间来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即俩者并不互斥，在全局性数据流使用单向，方便跟踪；局部性数据流使用双向，简单易操作。

③在表单中使用双向数据绑定

你可以用v.model指令在表单<input> ,<textarea>即<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue实列的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

<input>

<body>

  <div id="app">

      <input type="text" v-model="message" > {{message}}

  </div>

<script>

    var  vm=new  Vue({

       //el绑定标签，data是指数据

        el: "#app",

        data;{

           message：'123'

    },

    });

</script>

</body>

六：Vue的组件

后续+

Vue（1）的更多相关文章

  1. 一步一步学习Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  2. 一步一步学习Vue（十一）

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  3. vue（9）—— 组件化开发 - webpack（3）

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  4. vue（8）—— 组件化开发 - webpack（2）

    webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...

  5. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  6. 一步一步学Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  7. 下载vuejs,Hello Vue（vscode）

    下载vuejs,Hello Vue(vscode) Hello Vue 下载使用vue.js 动图演示 Vue的基本使用步骤  传送门:https://cn.vuejs.org/v2/guide/in ...

  8. 一步一步学Vue（九） 路由元数据

    一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html

  9. 一步一步学Vue（六）https://www.cnblogs.com/Johnzhang/p/7242640.html

    一步一步学Vue(六):https://www.cnblogs.com/Johnzhang/p/7237065.html  路由 一步一步学Vue(七):https://www.cnblogs.com ...

  10. vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比

    vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...

随机推荐

  1. springboot基础配置-->Properties配置

    Spring Boot项目中的application.properties配置文件一共可以出现在如下4个位置: 项目根目录下的config文件夹中. 项目根目录下. classpath下的config ...

  2. 全网最硬核 JVM TLAB 分析（单篇版不包含额外加菜）

    今天,又是干货满满的一天.这是全网最硬核 JVM 系列的开篇,首先从 TLAB 开始.由于文章很长,每个人阅读习惯不同,所以特此拆成单篇版和多篇版 全网最硬核 JVM TLAB 分析(单篇版不包含额外 ...

  3. python实现经典排序算法

    以下排序算法最终结果都默认为升序排列,实现简单,没有考虑特殊情况,实现仅表达了算法的基本思想. 冒泡排序 内层循环中相邻的元素被依次比较,内层循环第一次结束后会将最大的元素移到序列最右边,第二次结束后 ...

  4. C语言简介与第一个C语言程序

    一.C语言产生的背景 C语言的出现与操作系统Unix是分不开的.Unix是1969年由美国贝尔实验室的K. Thompson和D. M. Ritchie两人用汇编语言编写,它存在许多不足,因此,需要一 ...

  5. A - A Supermarket (贪心， 并查集)

    超市里有n个产品要卖,每个产品都有一个截至时间dx(从开始卖时算起),只有在这个截至时间之前才能卖出并且获得率润dy. 有多个产品,所有可以有不同的卖出顺序,每卖一个产品要占用1个单位的时间,问最多能 ...

  6. 2018-2019 ACM-ICPC Brazil Subregional Programming Contest PART (10/13)

    $$2018-2019 ACM-ICPC Brazil Subregional Programming Contest$$ \(A.Slackline\ Adventure\) \(B.Marbles ...

  7. Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) C. Remove Adjacent（字符串，贪心，枚举）

    题意: 给你一个由小写字母组成的字符串,若串中两个相邻元素字典序中也相邻,移除较大字母,问最多能移除多少个字母. 思路: 从大到小依次枚举. Tips: 注意下标的处理. 以小消大: #include ...

  8. 【noi 2.6_9275】&【bzoj 3398】Bullcow（DP）｛Usaco2009 Feb｝

    题意:一共有N只牡牛(公牛)和牝牛(母牛),每2只牡牛间至少要有K只牝牛才不会斗殴.问无斗殴发生的方案数. 解法:f[i][j]表示一共i只牛,最后一只是j(0为牝牛,1为牡牛)的方案数.f[i][0 ...

  9. CodeForces - 612D 思维

    题意: 给你n个线段和一个整数k,你需要找出来所有能被任意k条线段同时覆盖的区间个数的最小值,并按从左到右的顺序输出每个区间. 题解: 对于题目输入的n个线段的左端点L,右端点R,把它们分开放在结构体 ...

  10. Ubuntu上安装Python3编译器和 Pycharm 集成开发环境

    一.安装python3 (Ubuntu上面是自带python编译器的,可以用命令"python -V"来查看版本号.我下面安装的是pyhton3编译器) 一条命令就可以 sudo ...