Vue学习第一天

TimYang
189 阅读2分钟

VUE总结知识

VUE两个特性

  • MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。

  • MVVM 代表以下三个:

    1. Model = 页面渲染依赖数据源
    2. View = 当前页面所渲染的 DOM结构
    3. ViewModel = vue实例，MVVM核心

VUE基本使用

  1. 导入vue.js的script脚本文件
  2. 在页面中声明一个将要被vue所控制的DOM区域
  3. 创建vm实例对象(vue实例对象)
<div>{{username}}</div>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      username:'yangtingfeng'
    }
  })
</script>

VUE基础语法

1:内容渲染指令

  • 内容渲染指令用来辅助开发者渲染 DOM元素的文本内容

    • v-text

      <div>{{ username }}</div>
<p v-text="username"></p>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      username:'yangtingfeng',
    }
  })
</script>

    • {{}}插值表达式

      <div>{{ username }}</div>
<p v-text="username"></p>
<p>性别:{{ gender }}</p>
​
​
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      username:'yangtingfeng',
      gender: '女',
    }
  })
</script>

    • v-html 渲染成真正的html内容

       <div>{{ username }}</div>
 <p v-text="username"></p>
 <p>性别:{{ gender }}</p>
 <div v-html="info"></div>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      username:'yangtingfeng',
      gender: '女',
      info: '<h4 style="color:red;font-weight:bold">欢迎大家来学习vue</h4>'
    }
  })
</script>

    [v-text]  v-text指令缺点,会覆盖元素内部原有的内容

2:属性绑定指令

  • 插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

    <input type="text" v-bind:placeholder="tips" />
<input type="text" :placeholder="tips" />
  
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      tips: '请输入用户名',
      
    }
  })
</script>
​
      
    

3:在插值和属性绑定中编写JS语句

  • 在使用v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包括单引号
<div>1 + 2 的结果是:{{ 1 + 2 }}</div>
<div>{{tips}} 反转的结果是: {{tips.split('').reverse().join('')}}</div>
<div :title="'box' + index">这是一个div</div>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      tips: '请输入用户名',
      index:3
    }
  })
</script>
​
​

4:v-on指令

<p>count的值是:{{count}}</p>
<button v-on:click="add">+1</button>
<button v-on:click="sub(1)">-1</button> #也可以通过小括号传参
​
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      count:0,
    },
    methods: {
      add() {
        this.count+= 1
      },
      sub(n) {
        this.count-= n #注意是加传过来的值
      }
    }
  })
</script>

[vm]  vm 相当于this

4.1:v-on简写形式

<p>count的值是:{{count}}</p>
<button @click="add">+1</button> #注意是@
​
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      count:0,
    },
    methods: {
      add() {
        this.count+= 1
      },
    }
  })
</script>

4.2:$event 控制DOM

<button @click="add(1,$event)">+N</button>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      count:0,
    },
    methods: {
      add(n,e) {
        this.count+= n
        console.log(e) // e是事件源
          
        if(this.count % 2 === 0){
          //偶数
          e.target.style.backgroundColor = 'red' //style是对象
        }else{
          //奇数
          e.target.style.backgroundColor = ''
        }
      },
    }
  })
</script>

4.3:事件修饰符

<a href="http://www.baidu.com"
@click.prevent="show">跳转到百度首页</a>
​
<div style="height: 150px; background-color: orange; padding-left: 180px"
    @click="divHandler">
 <button @click.stop="btnHandler">按钮</button>    // 这个stop是vue的阻止冒泡的事件修饰符
</div>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
      
    },
    methods: {
      show(e) {
        //e.preventDefault()
        console.log("链接点击了")
      },
      btnHandler(e) {
        console.log('btnHandler')
        e.stopPropagation(); //阻止冒泡
      },
      divHandler(){
        console.log('divHandler')
      }
    }
  })
</script>

4.4:按键修饰符(监听键盘事件)

<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
  
<script>
  const vm = new Vue({
    el:'#app',
    data: {
     
    },
    methods: {
      clearInput(e) {
        console.log("触发方法")
        e.target.value = ''
      },
      commitAjax() {
        console.log("触发ajax")
      }
    }
  })
</script>

5:v-model指令(双向绑定)

v-bind 是单向数据源,只把数据同步在页面上，但是页面上的数据一经改动，不会同步给数据

<input type="text" v-model="username">
<input type="text" :value="username"> 
  
<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>  
    <option value="3">广州</option>  
</select>
<script>
  const vm = new Vue({
    el:'#app',
    data: {
     username:'zhangsan',
     city: ''
    },
    methods: {
      
    }
  })
</script>

5.1:v-model指令修饰符

<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>
//2.trim
<input type="text" v-model.trim="username">
<button @click="showName">获取用户名</button>
//3.lazy 中间页面的变化不会同步到数据源中，到倒数一个才会同步
<input type="text" v-model.lazy="username">


<script>
  const vm = new Vue({
    el:'#app',
    data: {
     n1:1,
     n2:2,
     username:"zhangsan"
    },
    methods: {
      showName() {
        console.log(`"用户名是 ${this.username}"`)
      }
    }
  })
</script>

6:了解v-if和v-show区别

  • v-show的原理是 ：动态为元素添加或移除 display:none样式,来实现元素的显示和隐藏

    • 如果要频繁的切换元素的显示状态，用v-show性能更好

  • v-if的原理是：每次动态创建或移除元素,实现元素的显示和隐藏

    • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很有可能不被展示出来，此时的v-if性能更好
​
<p v-if="flag">这是被 v-if控制的元素</p>
<p v-show="flag">这是被 v-show控制的元素</p>
<script>
  const vm = new Vue({
    el:'#app',
    data: {
     flag:true
    },
    methods: {
     
    }
  })
</script>

6:1v-if配套指令

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
     type:'A '
    },
    methods: {
     
    }
  })
</script>

7:v-for基本使用

<table>
      <thead>
        <th>索引</th>
        <th>Id</th>
        <th>姓名</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list" :key="index">
          <td>{{index}}</td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
        </tr>
      </tbody>
    </table>
​
<script>
  const vm = new Vue({
    el:'#app',
    data: {
     list:[
        {id:1,name:'张三'},
        {id:2,name:'李四'},
        {id:3,name:'王五'}
      ]
    },
    methods: {
     
    }
  })
</script>
avatar
文章
阅读
粉丝