一：概述

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. 四. SpringCloud负载均衡与调用

    1. Ribbon概述 1.1 Ribbon是什么 SpringCloud Ribbon是基于Netflix Ribbon实现的一套客户端,是负载均衡的工具. Ribbon是Netflix发布的开源项 ...

  2. vulnhub靶机练习-Os-Hax，详细使用

    Difficulty : Intermediate Flag : boot-root Learing : exploit | web application Security | Privilege ...

  3. UVA-12304 2D Geometry 110 in 1! （有关圆的基本操作）

    UVA-12304 2D Geometry 110 in 1! 该问题包含以下几个子问题 CircumscribedCircle x1 y1 x2 y2 x3 y3 : 三角形外接圆 Inscribe ...

  4. Codeforces Global Round 7 D1. Prefix-Suffix Palindrome (Easy version)（字符串）

    题意: 取一字符串不相交的前缀和后缀(可为空)构成最长回文串. 思路: 先从两边取对称的前后缀,之后再取余下字符串较长的回文前缀或后缀. #include <bits/stdc++.h> ...

  5. F - Count the Colors（线段树）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  6. Codeforces Round #307 (Div. 2) B. ZgukistringZ

    Professor GukiZ doesn't accept string as they are. He likes to swap some letters in string to obtain ...

  7. Butterfly美化

    Butterfly美化 首先提示,本文量特别大哦!基本上有所有的美化,还在持续更新ing,谨慎入坑......... 主题配置文件修改 基础配置 最最最开始的,好不容易搭建了自己的个人博客,当然要写上 ...

  8. KEIL + STM32 续

    接上一篇,debug出现问题 1.手动安装STM32 芯片包   Keil.STM32F1xx_DFP.2.2.0.pack; https://www.keil.com/dd2/Pack/ 百度网盘  ...

  9. pyspark Py4JJavaError: Unsupported class file major version 56

    在jupyter notebook跑上面的代码的时候报错Py4JJavaError: An error occurred while calling z:org.apache.spark.mllib. ...

  10. IOS键盘收起后，页面底部留白处理

    环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...