其他分享
首页 > 其他分享> > vue

vue

作者：互联网

目录

1.1 VUE的基本使用

有input要加上v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>why</title>
</head>
<body>
   
    <!-- 
        1.引入Vue.js
        2.创建Vue对象
        eL :指定根eLement(选择器)
        data :初始化数据(页面可以访问)
        3．双向数据绑定: v-model
        4.显示数据: {{xxx}}
        5.理角解vue的mvvm实现
     -->
    <div id="app">
        <input type="text" v-model="username">
        <p>Hello {{username}}</p>
    </div>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" >
    const vm=new Vue({
        el:'#app',
        data:{
            username:''
        }
    })
    </script>
</body>
</html>

效果：输入框输入啥 下面就显示什么
在这里插入图片描述

1.2 理解MVVM

在这里插入图片描述

2. 模板语法

双大括号表达式

第二个是转换成大写的 里面就相当于js语法一样 那些方法

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

指令一：强制数据绑定 ：


 <div id="a<script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" >
    const vm=new Vue({
        el:'#app',
        data:{
            username:'',
            imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg'
        }
    })
    </script>pp">
         <img src="imgUrl">
         <img v-bind:src="imgUrl">
         <img :src="imgUrl">
    </div>

在这里插入图片描述

指令二.绑定事件监听@

<div id="app">
        <input type="text" v-model="msg">
        <p>Hello {{msg}}</p>
         <p>Hello {{msg.toUpperCase()}}</p>
         <img src="imgUrl">
         <img v-bind:src="imgUrl">
         <img :src="imgUrl">

         <h1>指令二.绑定事件监听</h1>
        <button v-on:click="test">test按钮</button>
        <button @click="test2(msg)">test2按钮</button>
    </div>
    
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" >
    const vm=new Vue({
        el:'#app',
        data:{
            msg:'',
            imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg'
        },
        methods:{
            test(){
                alert('test按钮')
            },
            test2(content){
                alert(content)
            },
        }   
        
    })

3.计算属性和监视

1.计算属性
在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果
2.监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级:
通过getter/setter实现对属性数据的显示和监视计算属性存在缓存，多次读取只执行一次getter计算

computed

  <div id="app">
        <input type="text" v-model="msg1">
        <input type="text" v-model="msg2"> 
        <input type="text" v-model="msg3">
    </div>
    
  
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" >
    const vm=new Vue({
        el:'#app',
        data:{
            msg1:'1',
            msg2:'2',
        },
        computed:{
            msg3(){
                return this.msg1+this.msg2
            }
        }
        
    })
    </script>

在这里插入图片描述

watch

<div id="app">
        <input type="text" v-model="msg1">
        <input type="text" v-model="msg2"> 
        <input type="text" v-model="msg3">
        <input type="text" v-model="msg4">
    </div>
    
  
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" >
    const vm=new Vue({
        el:'#app',
        data:{
            msg1:'1',
            msg2:'2',
        },
        computed:{
            msg3(){
                return this.msg1+this.msg2
            }
        },
        watch:{
            msg1:function(value){
                this.msg4=value+' '+this.msg2;
            }
        }
    })
    vm.$watch('msg2',function(value){
        this.msg4=this.msg1+' '+value
    })
    </script>

给两个加上watch

标签：vue,msg1,msg2,watch,vm,const,属性
来源： https://blog.csdn.net/weixin_45988242/article/details/115671951