一：概述

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. 我们到底为什么要用 IoC 和 AOP

    作为一名 Java 开发,对 Spring 框架是再熟悉不过的了.Spring 支持的控制反转(Inversion of Control,缩写为IoC)和面向切面编程(Aspect-oriented ...

  2. 坐下坐下，基本操作（ZooKeeper 操作篇）

    本文作者:HelloGitHub-老荀 Hi,这里是 HelloGitHub 推出的 HelloZooKeeper 系列,免费开源.有趣.入门级的 ZooKeeper 教程,面向有编程基础的新手. Z ...

  3. unix环境高级编程第六章笔记

    口令文件 阴影口令 组文件 附属组ID 登录账户记录 系统标识 口令文件<\h2> /etc/passwd文件是UNIX安全的关键文件之一.该文件用于用户登录时校验用户的口令,文件中每行的 ...

  4. Codeforces Round #690 (Div. 3)

    第一次 ak cf 的正式比赛,不正式的是寒假里 div4 的 Testing Round,好啦好啦不要问我为什么没有 ak div4 了,差一题差一题 =.= 不知不觉已经咕了一个月了2333. 比 ...

  5. P1268 树的重量（板子）

    题目: 题目描述 树可以用来表示物种之间的进化关系.一棵"进化树"是一个带边权的树,其叶节点表示一个物种,两个叶节点之间的距离表示两个物种的差异.现在,一个重要的问题是,根据物种之 ...

  6. P1280 尼克的任务（DP）

    题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从第一分钟开始 ...

  7. SQL Server 远程连接配置

    打开sql server配置工具 SQL Server网络配置→SQLEXPRESS的协议→启用TCP/IP→右键属性→IP地址→IPALL端口修改为1433→重启SQL Server服务 https ...

  8. VScode 相关

    1.F5运行py文件,打开terminal终端的时候总是弹出Powershell窗口,只能在powershell窗口中用命令行运行程序,实在很不方便. 解法:右键Powershell属性,取消使用旧版 ...

  9. LINUX - 寄存器和堆栈

    堆栈模型: 函数调用: EBP:ESP EBP当前调用函数的栈底: ESP当前调用函数的栈顶: ---------------------------------------------------- ...

  10. 1.配置gitblit

    作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-06-21 14:38:43 星期五 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...