一：概述

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. NoSQL：一个帝国的崛起

    01关系数据库帝国 现在是公元2009年,关系帝国已经统治了我们30多年,实在是太久了. 1970年,科德提出关系模型,1974年张伯伦和博伊斯制造出了SQL ,帝国迅速建立起了统治. 从北美到欧洲, ...

  2. WebApi Swagger 接口多版本控制 适用于APP接口管理

    最近研究了下swagger多版本的维护,网上的文章千篇一律,无法满足我的需求,分享下我的使用场景以及实现 演示环境:Visual Studio 2019.Asp.NET WebAPI.NET Fram ...

  3. SQL中字符串截取函数(SUBSTRING)

    1.left(name,4)截取左边的4个字符 列: SELECT LEFT(201809,4) 年 结果:2018 2.right(name,2)截取右边的2个字符 SELECT RIGHT(201 ...

  4. Jcrop图片裁剪

    一.引入js和css 二.实现 1.jsp页面 <%-- Created by IntelliJ IDEA. User: a Date: 2019/8/19 Time: 9:36 To chan ...

  5. 嵌入式设备上卷积神经网络推理时memory的优化

    以前的神经网络几乎都是部署在云端(服务器上),设备端采集到数据通过网络发送给服务器做inference(推理),结果再通过网络返回给设备端.如今越来越多的神经网络部署在嵌入式设备端上,即inferen ...

  6. Codeforces Round #667 (Div. 3)

    比赛链接:https://codeforces.com/contest/1409 A. Yet Another Two Integers Problem 题意 给出两个数 $a$ 和 $b$,有以下两 ...

  7. HDU5589 Tree【分块 01字典树】

    HDU5589 Tree 题意: 给出一棵\(N\)个点的树,每条边有边权,每次询问下标为\([L,R]\)区间内的点能选出多少点对,点对之间的路径上的边权异或和大于\(M\) 题解: 对于两点\(u ...

  8. hdu2430Beans（单调队列）

     Mr. Pote's shop sells beans now. He has N bags of beans in his warehouse, and he has numbered them ...

  9. WSL ubuntu重置密码

    1. 在powershell中切换到root: 2. 进入ubuntu: 3. 修改制定用户的密码: 4. 切换回默认的用户:

  10. InnoDB 存储引擎简介

    InnoDB 核心特性 MVCC(Multi-Version Concurrency Control,多版本并发控制),事务处理,行级锁,热备份,自动故障恢复( Crash Safe Recovery ...