重新学习vue基础

• Z时代
• 2024-01-10
• 分类：综合

1、创建vue实例

var vm = new Vue({
  el: '#example',　　//选择元素
  data: {a:1}　　　　//基本数据
})

2、模板语法

（一）基本语法

<span>Message: {{ msg }}</span>　　//msg双向数据绑定

（二）只有第一次渲染

<span v-once>这个将不会改变: {{ msg }}</span>　　//不会双向绑定

（三）自动渲染html代码

<span v-html="rawHtml"></span>　　//自动识别内敛样式等

（四）如果是内敛样式要使用双向数据绑定，通常都要加上v-bind

<div v-bind:></div>

（五）在双花括号当中可以使用单行的JavaScript的语法

{{ ok ? 'YES' : 'NO' }}

3、计算属性以及观察方法

（一）基本写法

var vm = new Vue({
  computed: {　　//计算属性方法名
    reversedMessage: function () {　　//计算属性的名称
      return this.message.slice(0,1)　　//计算属性执行的方法
    }
  },
  watch: {　　　//监听数据变化就执行的方法
    message: function (val) {　　//message数据变化就执行
      this.message = val + ' ' +  this.message　　//val表示改变的新值
    }
  }
})

（二）computed的get和set

get就是获取得时候触发，set就是自身改变的时候触发（默认只有get）

computed:{
    message: {
        get:function(){
            return this.test+1　　
        },
        set:function(newValue){
            console.log(newValue);　　//newValue改变的新值
        }             
}        

4、Class 与 Style 绑定

（一）Class的对象语法（根据数据的布尔值确定是否有这个class）

data: {
  isActive: true,
  hasError: false
}
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {　　　　//这样写法更清晰
  classObject: {
    active: true,
    'text-danger': false
  }
}
<div v-bind:class="classObject"></div>

（二）Class的数组语法（直接获取这个数组的值的字符串）

data:{
　　activeClass:"asd",
　　errorClass:"ret"
}
<div v-bind:class="[activeClass, errorClass]"></div>

（三）Class的对象语法和数组语法可以共同使用

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

（四）内联样式的对象语法

data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

（五）内联样式的数组语法

data: {
    baseStyles:{
        color:"#e4393c"
    },
    overridingStyles:{
        border:"1px solid #ddd"
    }
}
<div v-bind:style="[baseStyles, overridingStyles]"></div>

5、条件渲染

（一）基本语法

<h1 v-if="ok==1">1</h1>
<h1 v-else-if="ok==2">2</h1> 
<h1 v-else>No</h1>

（二）template，多个元素条件渲染

<template v-if="ok">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

（三）如果没有key，自动复用已存在的标签

<input placeholder="Enter your username" key="user" v-if="loginType === 'username'">　　//加上了key就不会自动复用标签里的内容
<input placeholder="Enter your email address" key="email" v-else>

（四）v-show，类似于v-if不过只是简单的修改display的值。并且不能用v-else和不支持template。

<h1 v-show="ok==1">Hello1!</h1>

6、列表渲染

（一）渲染数组语法

data: {
   items: [
     { message: 'Foo' },
     { message: 'Bar' }
   ]
}
<li v-for="item in items">
   {{ item.message }}　　//单纯的渲染值
</li>
<li v-for="(item, index) in items">
   {{ index }} - {{ item.message }}　　//渲染建和值
</li>

（二）渲染对象语法

data: {
   object: {
     firstName: 'John',
     lastName: 'Doe',
     age: 30
   }
}
<li v-for="value in object">
   {{ value }}　　//单纯的渲染值
</li>
<li v-for="(value,key,index) in object">
 {{index}}:{{ key }}: {{ value }}　　//渲染建和值
</li>

（三）渲染时最好加上一个特殊的key值，如果顺序改变方便后续跟踪操作

<div v-for="item in items" :key="item.id"><!-- 内容 --></div>

（四）数组方法

【1】数组本身变异方法

vm.array.push({ message: 'Baz' });　　//后面增加一个
vm.array.pop();　　//后面删除一个
vm.array.shift();　　//前面删除一个
vm.array.unshift({message:'Baz'});　　//前面增加一个
vm.array.splice(0,1,{message:'Asb'});　　//瑞士军刀，从第几个开始删除多少个，替换成什么
vm.array.sort((a,b)=>a-b);　　//根据里面的方法排序
vm.array.reverse();　　//颠倒排序

【2】数组新建方法

vm.array.concat(arr1);　　//数组拼接
vm.array.join("");　　//数组转换成字符串
vm.array.slice(start,end);　　//截取一段数组
vm.array.filter(fun);　　//根据方法过滤　　

（五）重新设置数组

【1】重置设置其中一个值

Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)

【2】重置长度

example1.items.splice(newLength)

【3】对象赋予多个新属性

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

7、事件处理的方法

（一）基本语法

<div >
  <button v-on:click="greet">Greet</button>　　//事件触发
</div>
var example2 = new Vue({
  methods: {
    greet: function (event) {　　//event是事件处理方法
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

（二）传参数，并且要求event还存在

<button @click="greet('hi',$event)"></button>　　//除了传参数还要传个事件$event

（三）事件修饰符

<a v-on:click.stop="doThis"></a>　　//阻止单击事件
<form v-on:submit.prevent="onSubmit"></form>　　//提交事件不再重载页面
<a v-on:click.stop.prevent="doThat"></a>　　//修饰符串联,顺序很重要
<form v-on:submit.prevent></form>　　//单纯修饰符
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>　　
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
　<a v-on:click.once="doThis"></a>　　//只触发一次

（四）按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 所有特殊按键 -->
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!-- 系统修饰符 -->
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<!-- exact修饰符 -->
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
<!-- 鼠标修饰符 -->
.left
.right
.middle

8、表单输入

（一）基本文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

（二）单选和复选框

<input type="checkbox" >
<label for="checkbox">{{ checked }}</label>
<div >
  <input type="radio" >
  <input type="radio" >
  <span>Picked: {{ picked }}</span>
</div>

（三）多选时

new Vue({
  el: '...',
  data: {
    selected: []　　//多选时绑定数组
  }
})
<div >
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

（四）复选或者单选ture、false命名

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">　　//当选中时yes，没选中no

（五）双向数据绑定value，只需要加上v-bind

<input type="radio" v-model="pick" v-bind:value="a">　　//当选中时pick===a

（六）修饰符

<input v-model.lazy="msg" >　　//输入完才改变
<input v-model.number="age" type="number">　　//用户输入内容自己转为数字
<input v-model.trim="msg">　　//去空格

以上是 重新学习vue基础 的全部内容， 来源链接： utcz.com/z/379826.html