Vue使用及插值、属性绑定、计算属性、事件绑定

一、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>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值