vue知识整理—03-指令(代码片段)

   <div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p>str</p>
        <p v-text="str"></p>
        <p v-text="str">我是p标签中的内容</p>
        <p v-text="strhtml">我是p标签中的内容</p>
        <p v-html="str"></p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="strhtml">我是p标签中的内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue(
            el: ‘#app‘,
            data: 
                str: ‘abc‘,
                strhtml: ‘<span>content</span>‘
            
        );
    </script>

<div id="app">
  <!-- 作用：条件渲染 -->
  <!-- v-if  通过 移除  添加 一个元素 -->
  <div v-if="flag" class="text-danger">v-if</div>
  <div v-else>v-else</div>

  <!-- v-show 通过 元素的样式 display:none 控制 显示和隐藏 -->
  <div v-show="flag" class="text-success">v-show</div>

  <!--使用场景：v-if 会频繁创建和移除元素  v-show 控制显示和隐藏  -->
</div>
<script>
  var vm = new Vue(
    el: ‘#app‘,
    data: 
      flag: true
    ,
    methods: 
  )
</script>

p<div id="app">
        <!-- v-on:xx事件名=‘当触发xx事件时执行的语句‘ -->
        <!-- 执行一段js语句:可以使用data中的属性 -->
        <button v-on:click="count += 1">增加 1</button>
        <!-- v-on的简写方法 -->
        <button @click="count += 1">增加 1</button>
        <!-- 执行一个方法 -->
        <button @click="add">增加 1</button>
        <!-- 执行一个方法、这种写法可以传形参 -->
        <button @click="fn1(count)">执行fn1方法</button>
        <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
        <button @click="fn2($event)">执行fn2方法</button>
        <hr>
        <!-- 和v-for结合使用 -->
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
        <!-- v-on修饰符 如 once: 只执行一次 -->
        <button @click.once="fn4">只执行一次</button>

        <p>上面的按钮被点击了  count  次。</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue(
            el: ‘#app‘,
            data: 
                count: 0,
                items: [‘a‘, ‘b‘, ‘c‘]
            ,
            methods: 
                add: function() 
                    this.count += 1;
                ,
                fn1: function(count) 
                    console.log(count);
                    console.log(‘fn1方法被执行‘);
                ,
                fn2: function(e) 
                    console.log(e);
                    console.log(‘fn2方法被执行‘);
                ,
                fn3: function(index) 
                    console.log(index);
                    console.log(‘fn3方法被执行‘);
                ,
                fn4: function() 
                    console.log(‘fn4方法被执行了‘);
                
            
        );
    </script>

html
  <div id="app">
        <!-- data中的属性值会替换为标签的属性值 -->
        <img v-bind:src="src" />
        <p v-bind:id="idValue">内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue(
            el: ‘#app‘,
            data: 
                src: ‘./logo.png‘,
                idValue: ‘b‘
            
        );
    </script>

#### 绑定class类名

对象语法和数组语法

##### 对象语法

如果isActive为true，则返回的结果为 `<div class="active"></div>`

css
 .active 
            color: red;
 


html
 <div id="app">
        <div v-bind:class="active: isActive">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>

js
  <script src="./vue.js"></script>
    <script>
        var vm = new Vue(
            el: ‘#app‘,
            data: 
                isActive: true
            ,
            methods: 
                changeClassName: function() 
                    this.isActive = !this.isActive;
                
            
        );
    </script>

##### 数组语法

渲染的结果 `<div class="active text-danger"></div>`

html
<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue(
        el: ‘#app‘,
        data: 
            activeClass: ‘active‘,
            dangerClass: ‘text-danger‘
        
    );
</script>


#### 绑定style

对象语法和数组语法

##### 对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

html
 <div id="app">
        <div v-bind:style="color: redColor, fontSize: font18 + ‘px‘">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue(
            el: ‘#app‘,
            data: 
                redColor: ‘red‘,
                font18: 18
            
        );
    </script>
##### 数组语法

html
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue(
        el: ‘#app‘,
        data: 
            color: 
                color: ‘red‘
            ,
            fontSize: 
                ‘font-size‘: ‘18px‘
            
        
    );
</script>
#### 简化语法

html
<div v-bind:class="active: isActive">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="active: isActive">
</div>