VUE-2（模板指令）

最新推荐文章于 2023-11-21 10:41:35 发布

来七分

最新推荐文章于 2023-11-21 10:41:35 发布

阅读量320

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_43836308/article/details/88645427

版权

1.数据驱动视图 ，一切都是组件
实例var vm=new Vue({})

模板

el template,有template的话优先加载template
文本插值{ {}}（动态）{ {*}}（固定）

过滤

 {
  {'welcome'|uppercase}}
  {
  {'WELCOME'|lowercase}}
   {
  {'WELCOME'|lowercase|capitalize}}（首字母大写）
      {
  {12|currency}}（将数字转化为货币）
           {
  {12|currency '￥'}}

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
例如，v-bind 指令可以用于响应式地更新 HTML 特性：
<a v-bind:href=“url”>…
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent=“onSubmit”>…
缩写：

<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

第一个程序点击按钮，div消失（v-show控制dom的显示隐藏（display:none/block））
也可以用v-if实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="vue.js"></script>
    <script>
        window.function(){
            var vm=new Vue({
                el:'#box',
                data:{ //数据
                    a:true
                },
			methods:{
			showcont:function(){
			this.a=!this.a;}
			}
				
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" v-on:click='showcont'>//v-on:click事件
        <div style="width:100px; height:100px; backg

最低0.47元/天解锁文章

来七分

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-2（模板指令）

1.数据驱动视图，一切都是组件实例var vm=new Vue({})模板el template,有template的话优先加载template第一个程序点击按钮，div消失（v-show控制dom的显示隐藏（display:none/block））<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫