VUE系列
一 简介
    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染
二 优势
    1 vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

2 我们可以理解成VUE架构是由无数个vue实例组成,每个组件也被称为实例.每个实例有各自的属性数据和方法
三 示例
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <body>
  <div id="app">{{ message }}</div>
  </body>
  <script>
  var app = new Vue({
  el: '#app',
  data: {
  message: 'Hello Vue!' 
  }
 })
</script>
四 分类讲解
  1 初始化类
     var appname = new Vue({})//定义初始化对象,对对象进行操作赋值
  2 内部定义类属性
    1 el属性(类似js中的id属性,通过此属性传递对象,通常作用于div id)
    2 data属性(1 字典类型 { key:value} 2 采用{{key}}方式调用 3 alue可以是字符串,数字,列表,字典等任何支持的数据类型集合)

3 template属性(可以从这里进行模板的定义,如果不进行配置,则调用绑定对象的模板)

4 method 属性（定义vue实例对象的动作方法)

5 components ( 局部组件的注册从这里进行)
  3 调用内部调用变量
    1 object(定义的对象).$data(属性).message(value)
    2 this(定义的对象).message(value)
  4 method部分
     method:{functionname: function1(),functionname: function2()}
  5 标签与属性
    1 li标签
       v-for属性 目的:循环过滤        v-text属性 目的:输出变量  v-html属性 目的:输出变量,但是不会转义语法
       eg: 
       <li v-for='item in itmes' v-text="item" v-html="item">item</li> //列表循环 代替{{value}}
       vue部分
       data:{ list:[1,2,3,4,5,6]

2 button标签
     v-on属性 目的:触发事件

v-on:  可以缩写成@(小技巧) 配合click事件
     eg:
     <button @click="clickfunction>提交</button>//提交触发事件
     vue部分 
    method:{
   clickfunction: function(){
   alter(this.inputvalue)
   }
   }
3 input标签
   v-model属性 目的 通过input输入的值改变定义对象的属性,实现数据绑定
   eg:
  <input type='text' v-model="inputvalue />
  vue部分
  data:{ inputvalue:"3"},
6 组件方法
   1 调用vue方法(全局)
      Vue.component(
      'object-name',
     {
     props:[value], //定义变量
     template:"<li>{{value}}</li>"} //循环显示变量
     }
     )
   2 定义对象(局部)
    1 定义
      var object-name={
      props:[value], //定义变量
      template:"<li>{{value}}</li>"} //循环显示变量
      }
   2 vue中注册
    components:{
    "object-name":object-name
     },
  2 body调用
  <todo-item v-bind:content="item" v-for="item in list"></todo-item>
  tod-itme为定义的object name
  content为方法定义变量
  v-bind 将变量和循环列表变量绑定
  v-for 循环列表本身
7 总结  
1 模板在组件中定义 2 局部组件需要在vue中注册 3 局部组件变量需要与循环变量进行绑定

五 总结

这是对我两台学习vue.js的一个小总结

vue.js学习系列-第一篇的更多相关文章

  1. vue.js学习系列-第一篇(代码)

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...

  2. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

  3. vue.js学习系列-第二篇

    一 VUE实例生命周期钩子     1 生命周期函数         定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数      1 new vue()      2 before ...

  4. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  5. Vue.js学习和第一个实例

    第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...

  6. OpenStack学习系列-----第一篇 OpenStack介绍

    刚开始接触OpenStack,被它所承诺的前景,以及现在业界对它的期望吸引(OpenStack被誉为21世纪的Linux开源社区,可以预见其的发展前景是何其广阔.).怎么说呢,我现在也暂时相信,Ope ...

  7. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. 弱网测试-Network Emulator 网络模拟工具使用

    参考链接 https://www.jianshu.com/p/6a3d38aafac1

  2. 程序员如何避免996、icu？欢迎来讨论一下。

    最近996icu火了,我以前就被996害了.现在还没缓过来,可能是自己体质比较弱吧. 以前的事就不说了,说说现在的想法吧.那么程序员如何才能避免996icu呢? 有两个基本因素: 1. 实现一个功能, ...

  3. Python--day09（内存管理、垃圾回收机制）

    昨天内容回顾 1.  操作文件的三个步骤: 1.  打开文件:硬盘的空间被操作系统持有,文件对象被用用程序持续 2.  操作文件:读写操作 3.  释放文件:释放操作系统对硬盘空间的持有 2.  基础 ...

  4. [Alpha阶段]第八次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第八次Scrum Meeting 基本信息 名称 时间 地点 时长 第八次Scrum Meeting 19/04/12 新主楼F座2楼 35min ...

  5. （七）jdk8学习心得之join方法

    七.join方法 1. 作用:将list或者数组按照连接符进行连接,返回一个字符串. 2. 使用方法 1) String.join(“连接符”,数组对象或者list对象) 2) 首先转换成stream ...

  6. C# NetStream

    标题:NetStream 关注点:Read.Write 正文: int size = Read(buf, 0, buf.length); 这里一次会读入length个字节,如果小于这个数量,后面的就是 ...

  7. icpc 南昌邀请赛网络赛 Max answer

    就是求区间和与区间最小值的积的最大值 但是a[i]可能是负的 这就很坑 赛后看了好多dalao的博客 终于a了 这个问题我感觉可以分为两个步骤 第一步是对于每个元素 以它为最小值的最大区间是什么 第二 ...

  8. IFE第一天

    我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...

  9. Luogu4363 [九省联考2018]一双木棋chess 【状压DP】【进制转换】

    题目分析: 首先跑个暴力,求一下有多少种状态,发现只有18xxxx种,然后每个状态有10的转移,所以复杂度大约是200w,然后利用进制转换的技巧求一下每个状态的十进制码就行了. 代码: #includ ...

  10. 【BZOJ4001】[TJOI2015]概率论（生成函数）

    [BZOJ4001][TJOI2015]概率论(生成函数) 题面 BZOJ 洛谷 题解 这题好仙啊.... 设\(g_n\)表示\(n\)个点的二叉树个数,\(f_n\)表示\(n\)个点的二叉树的叶 ...