[JavaScript知识库]Vue基础语法（1）

一.插值操作

1.Mustache (双大括号)

{{}}

例：

<div id="app">
  <p>{{message}}</pp>
  <p>{{message}} 易烊千玺!</p>
  <p>{{counter * 2p>
</div>3
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '黄子韬',
      counter: 100
    },
  })
</script>

页面渲染效果

黄子韬

黄子韬 易烊千玺

200

2.v-once

表示元素只渲染一次

3.v-html

v-html不仅可以渲染数据，而且可以解析标签

<div id="app">
   <p v-html="msg"></p>
</div>
<script type="text/javascript">
   var vm = new Vue({
       el : "#app",
       data : {
         msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"
? ?    }
   });
</script>

页面效果：

这是一个h1元素内容

4.v-text

作用与Mustache一致 ，接受一个string类型

<div id="app">
  <p>{{message}}</p>
  <p v-text>{{message}}</p>
</div>3
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '黄子韬',
    },
  })
</script>

页面渲染效果：

黄子韬

黄子韬

v-html与v-text区别：

? v-text和{{}}表达式渲染数据，不解析标签。

? v-html不仅可以渲染数据，而且可以解析标签。　

5.v-pre

用于跳过这个元素和它的子元素的编译过程，显示原本Mustache语法

<div id="app">
  <p>{{message}}</pp>
  <p v-pre>{{message}}</p>
</div>3
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '易烊千玺',
    },
  })
</script>

页面渲染效果
易烊千玺
{{message}}

6.v-clock

会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除

二.绑定属性

1.v-bind

用于绑定一个或多个属性值，或者像一个组件创建props值

用vue实例中的data绑定元素的src和href

v-bind语法糖 （：）更方便简洁

v-bind 绑定class (class后面是一个对象)

（1）直接通过{}绑定一个类

（2）也可以通过判断，传入多个值

（3）和普通的类同时存在，没有冲突

（4）如果过于复杂，可以放在一个methods或者computed中

v-bind绑定style

（1）对象语法

style="{key(属性名):value(属性值)}

style后面跟的是一个对象类型

key是css属性名称

value是具体赋的值，值可以来自data中的属性

（2）数组语法

style后面跟的是一个数组类型

可以写多个值以，隔开

三.计算属性

我们可能对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

计算属性是写在实例的computed选项中的

每个计算属性都包含一个getter和setter

有了methods为什么还要在计算属性computed中写

因为计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

四.事件监听

v-on

我们用一个监听按钮的点击事件，v-on：cilck=’counter++‘? 在metnods中定义

v-on也有语法糖 可以写成@click

v-on 参数 （1）如果该方法不需要额外参数，那么方法后可不添加（如果方法本身中有一个参数，那么会默认将原生事件evevt参数传递进去）

? ? ? ? ? ? ? ? （2）如果需要同时传入某个参数，同时需要evevt时，可以通过$evevt传入事件

v-on修饰符

? ? .stop? 阻止事件冒泡

? ? .self? 当事件在该元素本身触发时才触发事件

? ? .capture 添加事件侦听器是，使用事件捕获模式

? ? .prevent? 阻止默认事件

? ? ?.once 事件只触发一次

五.条件判断

v-if? ?v-else-if? v-else

vue的条件指令可以根据表达式的值在Dom中渲染或销毁元素或组件

v-if：是惰性的，如果在初始渲染条件为false时，对应的元素及子元素不会渲染；直到条件第一次变为真时，才会开始渲染条件块。

v-if和v-show区别

v-if和v-show都可以决定一个元素是否渲染

当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。