Java全栈学习之Vue核心基础

Vue基础

el挂在点：

建议使用id选择器

data数据对象：

数据定义在data中。

<div id="app">
    {{ message }}
  <h2> {{ school }},{{ school.name }} </h2>
    <ul>
        <li>{{str[0]}}</li>
        <li>{{str[2]}}</li>
    </ul>
</div>

<script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '你好小黑！',
                school:{
                    name:"小白",
                    phone:"12345",
                },
                str:["1","1243","2"]
            }
        })                               
</script>

vue应用

内容绑定：

v-text：设置标签文本值（textContent)

<div id="app">
    <h2 v-text="message+'!'">深圳</h2>
    <h2 v-text="info+'!'">深圳</h2>
    <h2>{{ message +'!'}}深圳</h2>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello world",
            info: "前端移动端"
        }
    })
</script>

使用{{}}表达式可以替换里边文本内容

v-html 设置标签的innerHTML

v-html:会解析html标签

<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>

<script>
        var app = new Vue({
            el: '#app',
            data: {
                content:"<h1>小白</h1>"
            }
        })                               
</script>

v-on元素绑定事件

<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt">
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="双击" @dbclick="doIt">
    <h1 @click="changeFood">{{food}}</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        //数据
        data: {
            food: "西兰花炒蛋"
        },
        //方法函数
        methods: {
            doIt: function () {
                alert("做Java")
            },
            changeFood: function () {
                this.food += "不错！"
            }
        },

    })
</script>

v-show (操作的是样式）

频繁切换元素使用v-show，反之使用v-if

<div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <img v-show="isShow" src="img/monkey.gif" alt="">
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
        },
        methods: {
          changeIsShow(){
            this.isShow = !this.isShow;
          },
        },
      })
    </script>

当t-show="true"时就会显示图片

v-if

    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">小白</p>
    
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>

v-bind 设置元素的属性

<div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt=""   :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"小白",
                isActive:false
            },
            methods: {
                toggleActive(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>

v-for 根据数据生成列表结构

<div id="app">
    <ul>
        <li v-for="(item,index) in msg">
           {{index + 1}},{{item}}
        </li>
    </ul>
    <h2 v-for="item in vegetables" v-bind:title="item.name">
        {{ item.name }}
    </h2>
</div>

<script>
 var app = new Vue({
     el:'#app',
     data:{
         msg:["Tom","Jerry","Marry","Miss"],
         vegetables:[
             {name:"西兰花炒蛋"},
             {name:"蛋炒西蓝花"}
         ]
      },
 })
</script>

事件修饰符

v-model 获取和设置表单的值

<div id="app">
    <input type="text"  value="修改message" v-model="message">
    <h2>{{ message }}</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Test"
        },
    })

axios