一：概述

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. mysql:如何利用覆盖索引避免回表优化查询

    说到覆盖索引之前,先要了解它的数据结构:B+树. 先建个表演示(为了简单,id按顺序建): id name 1 aa 3 kl 5 op 8 aa 10 kk 11 kl 14 jk 16 ml 17 ...

  2. 彻底记住看起来很高级的__pycache__与__name__

    参考了的博客:https://blog.csdn.net/yitiaodashu/article/details/79023987 https://blog.csdn.net/ipi715718/ar ...

  3. 使用xshell连不上ubuntu14.04

    判断Ubuntu是否安装了ssh服务: 输入:#ps -e | grep ssh 如果服务已经启动,则可以看到"sshd",否则表示没有安装服务,或没有开机启动,如果不是下图情况, ...

  4. 基于ST表的RMQ

    RMQ算法,是一个快速求区间最值的离线算法,预处理时间复杂度O(n*log(n))查询O(1),所以是一个很快速的算法,当然这个问题用线段树同样能够解决. 问题:给出n个数ai,让你快速查询某个区间的 ...

  5. Codeforces Round #627 (Div. 3) A - Yet Another Tetris Problem（逻辑）

    题意 : 有n个高度,可以使任一高度加二任意次,问最终n个高度可否相同. 思路: 因为添加的2x1的方块不可旋转,只需考虑所有高度是否为同一奇偶性即可. #include <bits/stdc+ ...

  6. 【noi 2.6_90】滑雪（DP）

    题意:输出最长下降路径的长度. 解法:f[i][j]表示结尾于(i,j)的最长的长度.由于无法确定4个方位已修改到最佳,所以用递归实现. 1 #include<cstdio> 2 #inc ...

  7. Codeforces Round #687 (Div. 2, based on Technocup 2021 Elimination Round 2) C. Bouncing Ball (后缀和,枚举)

    题意:有一长度为\(n\)的平台,平台有的位置有木桩,可以使小球弹起来,小球必须从第\(p\)个位置开始,而且每次都会向右弹\(k\)个单位,然后有的位置是没有木桩的,你可以在这些的空的位置放一个木桩 ...

  8. Miller_Rabbin算法判断大素数

    普通的素数测试我们有O(√ n)的试除算法.事实上,我们有O(s*log³n)的算法. 下面就介绍一下Miller_Rabbin算法思想: 定理一:假如p是质数,且(a,p)=1,那么a^(p-1)≡ ...

  9. 动态主席树【带修改】&& 例题 Dynamic Rankings ZOJ - 2112

    参考链接:https://blog.csdn.net/WilliamSun0122/article/details/77885781 一.动态主席树介绍 动态主席树与静态主席树的不同在于:静态主席树不 ...

  10. 1005E1 Median on Segments (Permutations Edition) 【思维+无序数组求中位数】

    题目:戳这里 百度之星初赛原题:戳这里 题意:n个不同的数,求中位数为m的区间有多少个. 解题思路: 此题的中位数就是个数为奇数的数组中,小于m的数和大于m的数一样多,个数为偶数的数组中,小于m的数比 ...