Vue基础使用（1）

[ggggyyyyy0928]

 一、vue使用

（1） 引入vue.js

<script src="./vue.js"></script>

（2）创建一个vue实例

<div id="app">
    </div>
    <script>
      const app = new Vue({
        el: "#app", //挂载
        
      });
    </script>

el: 挂载，值为CSS选择器

二、插值操作

1.Mustache

绑定数据  {{}}

2.v-once指令

该指令表示元素和组件只渲染一次,

<div id="app">
      <h1 v-once>{{name}}</h1>
</div>

3.v-html指令

该指令可以把字符串解析成HTML标签

<div id="app">
      <h1 v-html="name"></h1>
</div>
<script>
      const app = new Vue({
        el: "#app", //挂载
        // data属性
        data: {
          name: "<a href=''></a>",
        },
      });
 </script>

4.v-text指令

<div id="app">
      <h1 v-text="name"></h1>
 </div>

5.v-pre指令

跳过vue的语法解析

<div id="app">
      <h1 v-pre>{{name}}</h1>
</div>

 6.v-clock

设置在页面未渲染的时候的样式

<style>
        [v-cloak]{
            display: none;
        }
</style>

<div id="app">
      <h1 v-cloak>{{name}}</h1>
</div>

三、插值操作

1.v-bind指令

动态绑定属性，去修改元素的属性，使用v-bind时候,属性等号右边是一个变量

    <div id="app">
      
     <img v-bind:src="url" alt="" />
     <!-- 缩写 -->
      <img :src="url" alt="" />
    </div>

2.绑定class

     （1）字符串

        样式类名不确定,需要动态指定

<div id="app">
      <div class="default" :class="mood"></div>
 </div>
<script>
      const app = new Vue({
        el: "#app",
        data: {
          mood: "sad",
        },
      });
    </script>

 

（2）对象

  要绑定个数确定,名字确定，动态决定使用

<div id="app">
      <div class="default" :class="moodObj"></div>
      <!-- 方法 -->
</div>
<script>
      const app = new Vue({
        el: "#app",
        data: {
          moodObj: {
            active: false,
            normal: false,
          },
        },
      });
</script>

（3）数组

绑定个数不确定,名字也不确定

<div id="app">
      <div class="default" :class="mood"></div>
      <div class="default" :class="moodObj"></div>
      <div :class="moodArr"></div>
      <!-- 方法 -->
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          moodArr: ["default", "active", "sad"],
        },
      });
    </script>

3.绑定style

  1.对象

 <div id="app">
      <div class="default" :style="styleObj"></div>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          styleObj: {
            backgroundColor: "skyblue",
            borderRadius: "50%",
          },  
        },
      });
    </script>

2.数组

 <div id="app">
      <div class="default" :style="styleArr"></div>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          styleArr: [
            {
              backgroundColor: "skyblue",
              borderRadius: "50%",
            },
            {
              border: "5px solid yellow",
            },
          ],
        },
      });
    </script>

四、计算属性

computed

1.数据需要转化以后再显示

2.数据具有缓存效果(如果数据没有发生变化,不会方法一直调用)

 <script>
      const app = new Vue({
        el: "#app",
        data: {
        },
        computed: {
        },
      });
    </script>

五、绑定事件

1.使用

v-on:事件类型="函数名()"

缩写： 

@事件类型="函数名()"

2.参数问题

没有参数

有参数

默认形参

传递参数会把默认形参覆盖

$event

3.事件修饰符

(1)阻止事件冒泡：

@事件类型.stop

 <button @click.stop="btnClick">点击</button> 

event.stopPropagation();

btnClick() {
            console.log("点击了按钮");
            // 阻止了冒泡事件
            event.stopPropagation();
 },

(2)阻止默认事件：

@事件类型.prevent

 <button @click.prevent="login">登录</button> 

event.preventDefault();

(3).once 一次性事件

@事件类型.once

<button @click.once="oneClick">一次事件</button>