vue学习小结

核心语法

模板语法

插值语法

<div id="app">
<p>{{msg}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.min.js">
const {createApp} = Vue

createApp({
  data () {
    return {
      msg: 'hello, world'
    }
  }
}).mount('#app')
</script>

指令语法

指令是vue的v-开头的标签 比如v-bind给标签指定动态属性 v-on给标签绑定事件 v-if和v-show控制标签是否显示

<a v-bind:href="url">aaaa</a>

<button v-on:click="clicktest"></button>

计算属性

比如标签中一个以来js的复杂三目表达式 可读性差 而且如果多处引用 还得写多次 冗余 可将这个弄成一个变量放在vue的computed下 标签只需要引用computed下的变量名 提高可读性

特点

1且计算属性有缓存 只算一次 methods的方法会算多次

2当计算属性依赖的数据变化时 计算属性会重新计算

3 计算属性也可以放到methods实现 但因为计算属性有缓存 性能有优势

v-model可以双向绑定数据