Vue 学习第一天

一,绑定一个点击事件

  <button v-on:click="change">点击</button>
  
    简写方法
   <button @click="change">点击</button> 

二，v-model 双向绑定

 <div id="app">
        <input type="text" v-model="nickname" />
        <p>{{nickname}}</p>
         //转换成大写
        <h1>{{nickname.toUpperCase()}}</h1>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                 nickname:"ssss"
                }
            },
            mounted() {

            },
            methods: {

            },

        })
    </script>

三,Vue的属性绑定

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

四 ，v-show显示与隐藏

<div v-for="(item, i) in nav">
         <div class="headert" v-show="activeinex==i" @mouseleave='leavey'></div>
 </div>

<div id="app">
       <p v-show="isMask">ssss</p>
 </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    isMask: true,//true 显示 / false 隐藏
                }
            },
            mounted() {

            },
            methods: {

            },

        })
    </script>