VUE基础学习

Aa_bandon

已于 2024-06-07 08:38:09 修改

阅读量110

点赞数 2

文章标签： vue.js 学习 javascript

于 2024-06-06 16:43:50 首次发布

本文链接：https://blog.csdn.net/Aa_bandon/article/details/139504335

版权

1.js添加vue.js脚本，项目中引用。

el表示选中的vue作用区域。

data里面存放数据。

methods中存放在该区域的所有方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.4.0.js"></script>
</head>
<body>

    <div id="app">
        <p>{{msg}}</p>
    </div>

</body>
</html>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            msg:"第一个vue程序。"
        }
    })
</script>

2.VUE中的常用指令。

v-text和v-html是插值表达式。使用后会直接覆盖后面标签里的文字内容。

v-bind属性绑定指令，可以简写为：。

v-on事件绑定指令，可以简写为 @ ，后面只能写函数名，不能直接书写js代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue-2.4.0.js"></script>
</head>
<body>

  <div id="app">

    <p v-text="msg"></p>
    <p v-html="msg"></p>

    <input type="button" v-bind:value="msg">
    <input type="button" :value="msg">

    <input type="button" value="按钮1" v-on:click="show">
    <input type="button" value="按钮1" @click="show">
  </div>

</body>
</html>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
      msg:"第一个vue程序。"
    },
    methods:{
      show(){
        alert('aa')
      }
    }

  })
</script>

3.Vue中引入css样式的方法。

1.使用数组
2.三元运算符
3.直接使用对象
4.样式写在data中然后引用
5.直接在style中书写
6.样式写在data中，引用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.4.0.js"></script>
    <style>
        .red{
            color: red;
        }
        .thin{
            font-weight: lighter;
        }
        .bg{
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
<!--        1.使用数组-->
        <h2 :class="['red','thin','bg']">红字、瘦体、背景黄</h2>
<!--        2.三元运算符-->
        <h2 :class="['red','thin',isBg?'bg':'']">红字、瘦体、背景黄</h2>
<!--        3.直接使用对象-->
        <h2 :class="{red:true,thin:true,bg:flase}">红字、瘦体、无背景</h2>
<!--        4.样式写在data中然后引用-->
        <h2 :class="cssObj">红字、瘦体、背景黄</h2>
<!--        5.直接在style中书写-->
        <h2 :style="{'color':'red','font-weight':'lighter'}">红字、瘦体、无背景</h2>
<!--        6.样式写在data中，引用-->
        <h2 :style="[redCss,thinCss]">红字、瘦体、无背景</h2>
    </div>

</body>
</html>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            msg:"第一个vue程序。",
            isBg:true,
            cssObj:['red','thin','bg'],
            redCss:{'color':'red'},
            thinCss:{'font-weight':'lighter'}
        }
    })
</script>