Vue.js学习记录第一天

vue数据驱动

vue主要操作的是数据

数据类型

基本 number string boolean null undefined
Object function
Symbol（es6）

对象{ } 数组[]

数组的变异（括号中能改变原数组）

操作数组的方法
es4：(pop push unshift前面增加 shift前面减少 splice reverse sort )indexOf lastIndexof concat（拼接数组）slice
es5

forEach filter map some every reduce includes find

前面都有不赘述

框架和库

框架 vue
库 jquery underscore
框架和库的区别，框架拥有完整的解决方案，我们写好框架调用我们的，库是我们调用他

vue.js是渐进式的

通过组合完成一个完整的框架
vue全家桶核心为vue.js+vue-router(单页应用)+vuex（状态管理）+axios（获取数据）

vue特点

核心只关注图层
轻量，灵活
适用于移动端
渐进式框架

渐进式

声明式渲染（不关系怎么实现的）

组件系统

客户端路由（vue-route）

大规模状态管理（vuex）

构建工具（vue-cli）

核心店

响应的数据变化
当数据发生变化，视图自动更新

MVC(backbone) 单向的

model 数据

view 视图

controller 控制器
控制器获取数据->传递给业务模型->渲染视图->反馈给用户

MVVM(angular,vue) 双向的

model数据 plan JavaScript Object 计划好的JS对象

view视图是DOM

viewModel 视图模型
view-> view model DOM listensers实时映射->model
model->view model 中data binding->view

组合的视图组件
UI页面映射为组件树
划分组件可维护，可复用，可测试

安装vue

通过cdn

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

第一个程序

按照之前的介绍，首先需要一个视图模型

let vm=new Vue()

然后需要将View控制的DOM告诉它

  let vm=new Vue({
    el:'#app'})

然后是VM代理的数据

  let vm=new Vue({
    el:'#app',
    data:{msg:'大白熊'}
  });

最后将数据在页面显示

    <div id="app">
      {{msg}}
    </div>

全部程序

  <body>
    <div id="app">
      {{msg}}
      <!--这里换行会出现问题-->
    <!--希望在页面中展示data-->
    <!--moustache语法，表达式，可以放赋值，取值，三元-->
    </div>
  </body>
  <script>
  //vue的构造函数，看到构造函数就总是要new
  let vm=new Vue({
    el:'#app',
    //element,告诉它当前归view管理的DOM,只能挂载在普通的元素上，html和body不行
    data:{msg:'大白熊'
    //data中的数据会被VM所代理，可以通过vm.msg取到对应的内容
    }
  });

视图控制数据

现在只能数据控制视图，还做不到视图控制数据

input
checkbox
textarea
radio
select
这里需要用到vue的指令

vue的指令

只是dom的行间属性，vue给这类属性赋予了一定的意义。来实现特殊的功能，所有的指令都以v-开头

现在需要将页面上的数据传递到VM中，以input框举例

  {{msg}}
  <input type="text" v-model="msg">
<!-- 先将数据写入输入框，再改变输入框后，改变数据-->

这时改变input中的值，页面上的值也会改变
值得注意的是
value,checked,selected属性一般会被vue忽略
vue没有大写的属性
v-model会将msg的值赋予输入框，输入框的值影响数据
数据改变input中的值也会改变

defineProperty

为对象定义属性

let obj={}
Object.defineProperty(obj,'name',{
configurable:false,//是否可删除
writable:false,//是否可重新赋值
enumerable:false,//是否可枚举
value:1//值
get(){
//取obj的name属性会触发
return value；
},
set(val){
//给obj赋值会触发set方法

}
})
//obj {"name":1}

基本指令

1. v-text==={{}}
代码从上到下执行，{{msg}}会先执行，然后vm再渲染，利用v-text可以解决这个问题

<div id="app" v-text="msg"></div>

msg这里也可以写表达式
2. v-once
只绑定一次，数据再次变化，页面不会刷新

<div v-once>
{{msg}}
</div>

v-once不用赋值
3. v-html
把html字符当作html渲染,一定是可以信任的html
直接

{{p}}

输出在页面上的会是

<p>大白熊</p>

不符合我们的要求
所以需要

<div v-html="p"></div>

4. v-if
v-if指令是根据表达式的值来决定是否插入页面元素
v-else
v-else-if
和v-if搭配使用

<div id="app">
   <div v-if="type==='A'">A</div>
   <div v-else-if="type==='B'">B</div>
   <div v-else-if="type==='C'">C</div>
</div>
<script>
let VM=new Vue({
el:"#app",
data:{
type:'C'
}
})
</script>

5. v-show
根据表达式的布尔值，决定是否显示页面元素
6. v-for
可以绑定一组数据来渲染一个列表
表达式有以下几种形式

site in sites sites 是源数据数组并且 site 是数组元素迭代的别名

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'aaa' },
      { name: 'bbb' },
      { name: 'ccc' }
    ]
  }
})
</script>

value in object 对象的属性

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'aaa',
      age: 12,
    }
  }
})
</script>

(value, key) in object

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

(value, key, index) in object

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

n in 10 循环整数

数据响应的变化

对象

使用变量前先要初始化，否则新加的属性并不会导致页面刷新
如果{{}}中是VM data中不存在的项，会报错
如果是存在的项不存在的属性，不会报错
但是这时给这个属性赋值并不会有效果
vue会循环data中的数据（数据劫持）,以此增加getter和setter

    <div id="app">
      {{a.school}}
      <!--如果不存在a会报错，但是调用a不存在的属性并不会-->
      <!--vue会循环data中的数据（数据劫持）,以此增加getter和setter-->
      <!--但是如果这时给school赋值也并不会改变页面-->
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue(
      el:"#app",
      data:{
        a:{}
      }
      )

这时给school赋值也不会有更新

对于不存在的属性，想要增加属性使用

vm.$set(vm.a,'school',1)

第一个变量是对象，第二个是增加的属性，第三个是数据

替换原对象

vm.a={school:"1",age:"8"}

数组

想要取固定位置的项，可以直接取

<div id="app">
{{arr[1]}}
</div>

在script直接改变数组相应位置的项，监控不到
同理长度也不会

    <div id="app">
      {{arr}}
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
      el:"#app",
      data:{
        arr:[1,2,3,4,5]
      }}
      )
      vm.arr[0]=100
      console.log(vm.arr)
      //显示是[1,2,3,4,5]，但是console.log()是[100,2,3,4,5]
    </script>

利用变异方法可以改变页面显示的数组

let vm=new Vue({
      el:"#app",
      data:{
        arr:[1,2,3,4,5]
      }}
      )
      vm.arr[0]=100
      console.log(vm.arr)
      //显示是[1,2,3,4,5]，但是console.log()是[100,2,3,4,5]
      //变异方法:pop push shift unshift sort reverse splice 利用这些方法可以修改页面中显示的项
      //如果是利用不修改的方法，重新赋值即可
      vm.arr.reverse();
      //而且这时的数组是经过了改变项目的 输出为[5,4,3,2,100]

也可以重新赋值

  vm.arr=vm.arr.map(item=>item+3)

数组的循环

v-for会更高效解决循环问题，复用原有结构
v-for这里的值是随便一个名称 in xxx,这里xxx是data中属性名称，比如例子中的animals
{{}}中是v-for第一个名称.属性值，不能直接用数组中属性名称，例子中 animals.name会无显示
和forEach相似，例子中a就相当于item

    <div id="app">
      <ul>
        <li v-for="a in animals">  {{a.name}}</li>
        <!--循环谁在谁身上加v-for属性，这里要循环的是li不是ul-->
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        data:{
          animals:[{"name":"大白熊"},{"name":"北极熊"},{"name":"企鹅"}]
        }
      }
      )

(a,index) in animals也可以
in 替换成of 也可以

层叠式的列表

当数组的每一项有另一个数组时，也可以生成新的子列表

    <div id="app">
      <ul>
        <li v-for="(animal,index) in animals">{{index+1}}.{{animal.name}}
          <ul>
            <!--这里index的值还是上一步的，所以index名需要换一个-->
            <li v-for="(age,index2) in animal.age">
              {{index+1}}.{{index2+1}}.{{age}}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        data:{
          animals:[{"name":"大白熊","age":[12,2,5]},{"name":"北极熊","age":[25,4,8]},{"name":"企鹅","age":[2,8,15]}]
        }
      }
      )

一般情况下不会出现三维数组

字符串,数字和对象的循环

<div v-for="c in 'aaa'">{{c}}</div>
<div v-for="c in5">{{c}}</div>
<div v-for="(value,key,index) in obj">{{index+1}}.{{key}}:{{value}}</div>

事件

原生点击事件

    <!--所有的事件函数都要是在window上的-->
    <div id="app" onclick="fn()">点击事件</div>
    <!--必须要加()才能执行函数-->
    <script>
      function fn()
      {
        alert("点击")
      }
    </script>

vm事件
v-on:事件名称=""
事件名称可以使click，mouseon，mousedown等
method和data全部数据都会放在VM中所以名字不能冲突，method中的this指向的都是实例，返回的数据会是data中的数据
事件函数不能重复定义，会报错

    <div id="app">
      <div v-on:click="fn"></div>
      <!--传参加括号，不传参不加,否则会自动传为事件源-->
      <!--需要传event的时候用$event-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        methods:{
          fn(){alert("click")}
        },
        data:{
          //为了区分，这里全部放数据
          //fn不要重复定义
        }
      })

v-on简写为@

  <div @click="fn"></div>

传参加括号，不传参不加,否则会自动传为事件源
需要传event的时候用$event

实例

现在做一个可增添删减的列表，点击回车将数据input上的数据传递到VM中，然后更新列表
三个部分

输入数据的input
列表
删除键

input部分

<input type="text" v-model="newitem" @keyup="addnew">

增加完毕后
需要在methods中定义按下回车时的函数，这里methods必须是methods少打s会报错

          addnew(event){
            if(event.key=="Enter")
            {
              this.animals.push(this.newitem)
            }
          }

同时data中需要有animals和newitem

        data:{
          newitem:"",
          animals:["大白熊","兔子","狼"]
        }

列表

简单的v-for构建的列表

      <ul>
        <li v-for="(animal,index) in animals" style="line-height:60px;">
          {{animal}}
        </li>
        </ul>

此时添加功能就已经完成了

删除功能

在每个li中加入一个按键，点击时调用函数，给这个函数传入index函数，再利用filter将符合的值剔除掉
注意filter并不会改变原来的数组，所以需要利用赋值改变原来的数组

      <ul>
        <li v-for="(animal,index) in animals" style="line-height:60px;">
          {{animal}}<button style="margin-left:30px" @click="del(index)">删除</button>
        </li>
        </ul>

函数部分

          del(i){
            let newanimals=this.animals.filter((item,index)=>index!=i)
            this.animals=newanimals
          }

为了完善功能简单的加入了遍历数组弹出已经有的项以及空项警告

          addnew(event){
            if(event.key=="Enter")
            {
              if(this.newitem=="")
              {
                alert("空项")
                return
              }
            else if(this.animals.includes(this.newitem))
              {
                alert(this.newitem+"已经存在")
                return
              }
            else {
                this.animals.push(this.newitem)
              }

            }
          }

还有一种检测按下键盘按键的方法

<input type="text" v-model="newitem" @keydown.enter>

多个按键也可以

<input type="text" v-model="newitem" @keydown.ctrl.enter>
``

最后编辑于：2018.11.19 21:22:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,992评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,212评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,535评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,197评论 1赞 287
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,310评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,383评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,409评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,191评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,621评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,910评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,084评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,763评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,403评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,083评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,318评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,946评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,967评论 2赞 351