前端学习笔记：Vue第二天--vue指令、获取标签ref、监听数据变化watch、计算属性computed

最新推荐文章于 2024-08-17 21:17:28 发布

Yokily

最新推荐文章于 2024-08-17 21:17:28 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44519518/article/details/119462658

版权

本文详细介绍了Vue中的核心指令，包括v-html、v-text、v-on、v-bind、v-for、v-if/v-show、v-model、v-cloak、v-pre和v-once的使用方法。同时，讲解了如何通过ref获取标签实例，使用watch监听数据变化，以及利用计算属性computed实现动态计算。这些内容有助于开发者深入理解Vue的响应式系统和数据绑定机制。

摘要由CSDN通过智能技术生成

Vue指令：

v-html和v-text:

v-html和v-text都可以修改标签的内容，v-html可以识别标签，v-text会把标签当做文本处理.

<body>
        <div id="app">
            <div>{
  {msg}}</div>
            <!-- 如果data中的变量作为属性的值得时候，不用加{
  {}} -->
           
            <div v-html="msg"></div>
            <div v-text="msg"></div>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'<h1>这是标题</h1>'
                }
            })
        </script>


    </body>

v-on：

v-on:事件类型(click、 mouseenter、 mouseleave、 focus获取焦点、 blur失去焦点)="函数()"

函数会去methods内部去找。

methods：专门放置方法或者函数。

方法名字:定义函数(方法)

获取data中的值： this.data中的变量名

修改data中的值： this.data='值'

<body>
        <div id="app">
            <input type="text" v-on:focus="fn('聚焦')"  v-on:blur="fn('失去焦点')">
            {
  {msg}}
           
            <button v-on:click="change()">按钮</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                // data放置数据
                data:{
                    msg:0
                },
                methods:{
                    
                    change:function(){
                        // console.log(111)
                       
                        this.msg++
                    },
                    fn:function(a){
                        console.log(a)
                    }
                }
            })
        </script>
    </body>