Vue-Day1

最新推荐文章于 2022-11-28 15:30:16 发布

九先生学习ing

最新推荐文章于 2022-11-28 15:30:16 发布

阅读量139

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45271126/article/details/115279818

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本地应用

v-tex

v-text 指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用**差值表达式{{}}**可以替换指定内容
内部支持写表达式

v-html

v-html指令的作用是：设置元素的innerHTML
内容中有HTML结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析HTML结构使用v-html

v-on

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令简写**@**
绑定的方法定义在methods属性中
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上，修饰符可以对事件进行限制
其中 .enter 可以限制触发的按钮为回车
事件修饰符有很多种

<body>
//v-on的事件调用
    <div id="app">
        <input type="button" value="按钮" @click="doIt(666,'老铁')">
                                                    //p1,   p2
      <input type="text" @keyup.enter="sayHi">
    </div>
   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      var app = new Vue({
          //创建app实例
          el:"#app",
          methods:{
              doIt:function(p1,p2){
                  console.log("做it")
                  console.log(p1);
                  console.log(p2)
              },
              sayHi:function(){
                  alert("吃了吗");
              }
          }

      })
       
    </script>
</body>

计数器

<body>
    <div class="app">
        <button @click="add">
            +
        </button>
        <span>{{num}}</span>
        <button @click="sub">
            -
        </button>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
<script>
    var app = new Vue({
        el:".app",
        data:{
            num:1
            //初始值
        },
        methods:{
            add:function(){
                if(this.num<10){
                //判断
                this.num++;
                //让num递增
                }else{
                    alert('别点了')
                }
                


            },
            sub:function(){
                if(this.num>10){
                    this.num--;

                }else{
                    alert('最小了')
                }
               
            }
        }
    })
</script>
</body>
</html>

计数器应用点

1.创建vue事例是:el(挂载点)，data(数据)，methods(方法)
2.v-on指令的作用是绑定事件，简写@
3.方法中通过this，关键字获取data中的数据
4.v-text指令的作用是：设置元素的文本，简写为{{}}
5.v-html 指令的作用是:设置元素的inner HTML

v-show 指令

v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示问题
指令后的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应的显示状态会同步更新

v-if 指令

v-if 指令的做用是：根据表达式的真假切换元素的显示状态
本质是通过操作 dom 元素来切换显示状态
表达式的值为 true ，元素存在于 dom树中，为 false 从 dom树中移除
频繁的切换 v-show ，反之使用v-if，前者的切换消耗小

v-for 指令

v-for 指令的作用是：根据数据生成列表结构
数组经常和v-for 结合使用
语法是（item，index）in 数据
item 和index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

九先生学习ing

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Day1

本地应用v-texv-text 指令的作用是：设置标签的内容（textContent）默认写法会替换全部内容，使用**差值表达式{{}}**可以替换指定内容内部支持写表达式v-htmlv-html指令的作用是：设置元素的innerHTML内容中有HTML结构会被解析为标签v-text指令无论内容是什么，只会解析为文本解析文本使用v-text，需要解析HTML结构使用v-htmlv-onv-on指令的作用是：为元素绑定事件事件名不需要写on指令简写**@**绑定的方法定义
复制链接

扫一扫