Vue2学习笔记

简介: Vue2学习笔记

如果用Visual的话安装如下三个插件(Vetur vue Vue3 Snippets)

数据绑定:例如 input 单行输入标签标签,单项数据绑定v-bind,数据只能从data流入页面

多项数据绑定v-model,数据双向流动,针对表单

M V VM 模型

M:Model:代表data里面的数据

V:View:代表div里面的数据

VM:Vue:Vue实例,里面包括data

小知识:定时器setTimeout(()=>{需要定时的事件},定时多长时间)

data也可以写成函数,用返回值的方式来表达里面的内容(数据内容)

事件绑定: @click=“方法名” 绑定事件中可传递参数:@click=“show1(参数)”

{{中也可以加方法}}

绑定class样式需要在class前面加一个冒号,带有冒号的class是去Vue里面找(Vue里引入样式的名字,适用类名不确定),不带冒号的是在样式里找

v-show 条件展示,就是控制是否显示 v-if v-else 也能实现

v-for历,遍历数组:


遍历对象:<li v-for="(item,index) in arr">{{value}}</li>


列表渲染列表过滤(按照条件筛选)

例如:(冬 伦 周) 还可以按照年龄升序

马冬梅-19-女

周冬雨-20-女

周杰伦-21-男

温兆伦-22-男

    <input type="text" v-model="keyWord" placeholder="请输入姓名"/>
    <button type="button" @click="sortType = 1">年龄升序⬆</button>
    <button type="button" @click="sortType = 2">年龄降序⬇</button>
    <button type="button" @click="sortType = 0">原顺序</button>
    <button >更改马冬梅信息</button>
    <ul>
      <li v-for="(p,infex) in fmtper" :key="p.id">
        {{p.name}}--{{p.sex}}--{{p.age}}岁
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#apk',
      data: {
        keyWord:'',
        sortType:0,
        persons:[
          {id:'001',name:'马冬梅',age:'35',sex:'女'},
          {id:'002',name:'周冬雨',age:'20',sex:'女'},
          {id:'003',name:'周杰伦',age:'41',sex:'男'},
          {id:'004',name:'温兆伦',age:'25',sex:'男'},
        ],
      },
      computed:{
        fmtper(){
          const {persons,keyWord,sortType} = this
          //根据关键词过滤
          let arr = persons.filter( p => p.name.indexOf(keyWord) !== -1)
          //若需要排序
          if(sortType){
            //排序
            arr.sort((a,b)=>{
              if(sortType == 1) return a.age - b.age
              else return b.age - a.age
            })
          }
          return arr
        }
      }
    })
  </script>


input如果是text那么v-model收集的是value的值

input如果是radio那么v-model收集的是value的值

input如果是checkbox那么v-model(数组)收集的是value的值!!没设置value的话是布尔值

<div id="apk">
      <form @submit.prevent="submit">
        账号:<input type="text" v-model="userInfo.account"/><br/>
        密码:<input type="password" v-model="userInfo.password"/><br>
        性别:男<input type="radio" name="sex" v-model="userInfo.sex" value="男"/>
           女<input type="radio" name="sex" v-model="userInfo.sex" value="女"/><br>
        爱好:抽烟<input type="checkbox" v-model="userInfo.hobby" value="抽烟"/>
        喝酒<input type="checkbox" v-model="userInfo.hobby" value="饮酒"/>
        烫头<input type="checkbox" v-model="userInfo.hobby" value="烫头"/><br>
        所属校区:<select v-model="userInfo.city">
          <option value ="">请选择校区</option>
          <option value ="beijing">北京</option>
          <option value ="wuhan">武汉</option>
          <option value ="shanghai">上海</option>
          <option value ="shenzhen">深圳</option>
        </select><br>
        其他校区:<textarea rows="10" cols="30" v-model="userInfo.other"></textarea><br>
        <input type="checkbox" v-model="userInfo.agree"/>阅读并接收<a href="http://www.baidu.com">《用户协议》</a><br>
        <button type="button" @click="submit">提交</button>
      </form>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#apk',
        data: {
          userInfo:{
            account:'',
            password:'',
            sex:'',
            hobby:[],
            city:'',
            other:'',
            agree:false,
          }
        },
        methods:{
          submit(){
            console.log(this.userInfo)
          }
        }
      })
    </script>




相关文章
|
6月前
|
JavaScript 前端开发
Vue学习笔记(五) 长乐无极
Vue学习笔记(五) 长乐无极
|
6月前
|
JavaScript 前端开发 Android开发
Vue学习笔记(三) 甚欢篇
Vue学习笔记(三) 甚欢篇
|
6月前
|
JavaScript 前端开发 C++
Vue学习笔记(四) 久处不厌
Vue学习笔记(四) 久处不厌
|
6月前
|
JavaScript 前端开发 程序员
|
JavaScript 前端开发 测试技术
Vue超详细学习笔记
Vue超详细学习笔记
255 0
|
存储 缓存 开发框架
vue3学习笔记
vue3详细笔记
153 0
|
缓存 JSON JavaScript
Vue学习笔记(下)
Vue学习笔记(下)
|
JavaScript 前端开发 开发工具
|
XML 缓存 JavaScript
Vue1|学习笔记
快速学习Vue1
134 0
Vue1|学习笔记
|
JavaScript 前端开发 安全
Vue 2|学习笔记
快速学习Vue 2
154 0
Vue 2|学习笔记