vue的基本模板语法

最新推荐文章于 2024-06-11 01:02:06 发布

就是有点怕怕

最新推荐文章于 2024-06-11 01:02:06 发布

阅读量359

点赞数

分类专栏： vue相关知识文章标签： vue js html javascript

本文链接：https://blog.csdn.net/weixin_42371354/article/details/104823711

版权

vue相关知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue的基本模板语法

1. 指令

指令的本质就是自定义的属性，在vue中都是以v-开头的。
v-cloak (防止页面加载时出现闪烁的问题）

<style type="text/css">
  [v-cloak]{
    display: none;
  }
 </style>
<div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  
<script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>

v-text (用于将数据【不转化html标签】填充到标签中，作用于插值表达式类似，但是没有闪动问题)

<div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
      }
    });
  </script>

v-html (用法和v-text 相似但是他可以将HTML片段填充到标签中，可能有安全问题，不能用于用户提交的内容中)

<div id="app">
    <div>{{msg}}</div>
    <div v-html='msg1'></div>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>

v-pre (显示原始信息跳过编译过程，常用于静态内容的渲染)

<div id="app">
    <div>{{msg}}</div>
    <div v-pre>{{msg}}</div>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
      }
    });
  </script>

v-once (执行一次性的插值【当数据改变时，插值处的内容不会继续更新】)

<div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        info: 'vue'
      }
    });
  </script>

2. 双向数据绑定

当数据发生变化的时候，视图也就发生变化；当视图发生变化的时候，数据也会跟着同步变化。

v-model (只能在 <input>、<select>、<textarea>、components中使用)

<div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>

v-on (用来绑定事件的，可用@代替)

 <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle'>点击2</button>
            <button @click='handle1(1,3,$event)'>点击3</button>
        </div>
    </div>
    
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            }, 
            // methods  中 主要是定义一些函数
            methods: {
                handle: function() {
                    // 这里的this是Vue的实例对象+
                    console.log(this === vm)
                        //   在函数中 想要使用data里面的数据 一定要加this 
                    this.num++;
                }
                handke1: function(a,b,event) {
                	console.log(a+b);
                	console.log(event.target);
                }
            }
        });

3.事件修饰符、按键修饰符

事件修饰符：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

案件修饰符：（也可以使用config.keyCodes自定义按键修饰符别名，形如：Vue.config.keyCodes.name = 66）

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>

4. 绑定

v-bind (v-bind 指令被用来响应地更新 HTML 属性，v-bind:href 可以缩写为 :href)

  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com'
      },
      methods: {
        handle: function(){
          // 修改URL地址
          this.url = 'https://www.google.com';
        }
      }
    });
  </script>



/********************** v- bind 绑定对象和数组 *******************/
1、 v-bind 中支持绑定一个对象 
	如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
/**
	HTML最终渲染为 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  对应的渲染到页面上的CSS类名	
		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 

		当 isColor 和 isSize 变化时，class列表将相应的更新，
		例如，将isSize改成false，
		class列表将变为 <ul class="box textColor"></ul>
**/
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>

<sript>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
    	activeColor:"red",
        activeSize:"25px",
    }
})
</sript>


2、 /* v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据 */

<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>


/*******************  也可以直接控制行内样式  style  ************/

 <div v-bind:style="styleObject">绑定样式对象</div>'
 
/* CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)   */
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>

/*  组语法可以将多个样式对象应用到同一个元素 */
<div v-bind:style="[styleObj1, styleObj2]"></div>

<script>
	var vm = new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }
</script>

v- bind 绑定对象和绑定数组的区别

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

5.分支结构

v-if (多个元素通过条件判断展示或者隐藏某个元素，进行两个视图之间的切换，操作的是dom元素的增加以及删除)
v-show (v-show本质就是标签display设置为none，控制隐藏)

  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>

6.循环结构

v-for (用于循环数组、对象)

/*******************数组**********/
<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是我们自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

/*******************对象***********/

<ul id="example-1">
  <li v-for="(item,index) in items" :key='index'> // item 是具体值  index是索引
    {{ item }}
  </li> 
</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: {
        uname: 'zhangsan',
        age: 13,
        gender: 'male'
    }
  }
})
</script>

不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

key 的作用

key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM

就是有点怕怕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的基本模板语法

Vue的基本模板语法1. 指令指令的本质就是自定义的属性，在vue中都是以v-开头的。v-cloak (防止页面加载时出现闪烁的问题）<style type="text/css"> [v-cloak]{ display: none; } </style><div id="app"> <div v-cloak>{{m...
复制链接

扫一扫

专栏目录