vue基础

最新推荐文章于 2024-09-30 15:42:36 发布

程序员张三疯

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量1.2k

点赞数 32

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_65993561/article/details/141573961

版权

1.vue概述

vue是一种前端框架由html+css+js+ajax+axios组成

使用之前首先引入：在线引入（也可以本地引入）

基本格式：

<body>
   <div id="app"> //使用vue要至少有一个父容器，
     {{msg}} //差值表达式：可以在vue对象中取出变量的值
   </div>
</body>
</html>
<script>
    var app = new Vue({//创建一个vue对象
        el:"#app",    //通过选择器与父容器绑定
        data:{      //数据域：变量以键值对的形式储存在这里
            msg:"hello vue" 
        }
    })
</script>

2.data

data的两种格式：

<script>
    var app = new Vue({
        el:"#app",
        /*data:{ //对象式
            msg:"hello vue"
        }*/
        data(){
            return{ //函数式
                msg:"hello vue"
        }
        }
    })
</script>

data的数据类型：

<script>
    var app = new Vue({
        el:"#app",
        data:{
            a:1111,
            b:22.22, //数值型
            c:"haha",//字符串型
            d:[],  //数组型
            dog:{   //对象型
               id:"",
               name:"" 
            },
            msg:""
        }

    })
</script>

3.Vue指令

用在DOM中元素上的一个属性标签,不同的属性标签,肯定有不同的作用!
vue指令：HTML标签上带有 v- 前缀的特殊属性，不同指令不同含义

1.v-text指令

获取data数据, 设置标签的内容

<div id="app">
  <div v-text="a">666</div>
  <div>666{{a}}</div>
</div>

v-text是直接覆盖
{{}}是追加进去

2.v-html指令

设置元素本身、内容 (可以向元素中写入新的标签)

与v-text相同也是可以覆盖文本内容，

只不过可以识别 html标签

<div id="app">
  <div v-text="c">666</div>
  <div>666{{c}}</div>
  <div v-html="c">666</div>
</div>

3.v-on指令

为元素绑定事件, 比如: v-on:click="方法",可以简写为 @click="方法"

<body>
   <div id="app">
      <button v-on:click="m">hahaha</button>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            a:1111
        },
        methods:{
            m:function (){
                alert("666");
            }
        }
    })
</script>

带参数

<body>
   <div id="app">
      <button v-on:click="m('haha')">hahaha</button>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            a:1111
        },
        methods:{
            m:function (x){
                alert(x);
            }
        }
    })
</script>

this调用数据域的变量

<body>
   <div id="app">
      <button v-on:click="m()">hahaha</button>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            a:1111
        },
        methods:{
            m:function (){
                alert(this.a);
            }
        }
    })
</script>

4.v-show指令

修改元素的display,实现显示或者隐藏

值为true 显示, 为false 则隐藏

<div id="app">
    <div v-show="false">666</div>
    <div v-show="true">666</div>
</div>

5.v-if指令

根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

<div id="app">
    <div v-if="false">666</div>
    <div v-if="true">666</div>
</div>

频繁切换使用 v-show ,反之使用v-if

6.v-bind指令

设置元素的属性（比如:src,title,class）

语法格式: v-bind:属性名=表达式，可以简写为 :属性名

<body>
   <div id="app">
       <img v-bind:src="i">
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            i:"专业团队.png",
        }
    })
</script>

7.v-for指令

v-for="item in items" for(变量 : 遍历目标)

或 v-for="(item, index) in items index代表索引

item 代表遍历的每个值
items 代表要遍历的数组

<body>
   <div id="app">
       <ul>
           <li v-for="item in num">{{item}}</li>
       </ul>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:[1,2,3,4]
        }
    })
</script>

8.v-model指令

实现双向绑定

<body>
   <div id="app">
       <input type="text" v-model="msg">
       <input type="text" v-model="msg">
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           msg:""
        }
    })
</script>

其中一个文本框变化，改变数据域内变量的值从而改变另一个文本框

4.axios

引入在线文件

axios请求方法

对服务器资源，要执行的操作

GET：获取数据
POST：提交数据
PUT：修改数据(全部)
DELETE：删除数据

基本格式以get请求为例

<body>
   <div id="app">
     <button v-on:click="getMethod">get请求</button>
   </div>   
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           msg:""
        },
        methods:{
            getMethod:function (){
                          //↓请求的url
                axios.get("1.txt").then(function (){
                    alert("成功了！"); //请求成功执行
                },function (){
                    alert("失败了！"); //请求失败执行
                })
        }
        }
    })
</script>

利用get请求传入参数的三种格式

<body>
   <div id="app">
       用户名:<input type="text" v-model="username"> <br/>
       密码:<input type="password" v-model="password"> <br/>
       <button @click="getMethod()">get请求方式</button>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{

           username:"",
            password:""
        },
        methods:{
            getMethod:function (){
                //1.
                 /*axios.get("1.txt?username="+this.username+"&password="+this.password).then(function () {
                     alert("成功");

                 },function (){
                     alert("失败");

                 })*/
                //2.
               /* axios.get("1.txt",{params:{username:this.username,password: this.password}}).then(function () {
                    alert("成功");

                },function (){
                    alert("失败");

                })*/
               //3.
                var that = this;
                axios({
                    url:"1.txt",
                    method:"get",
                    params:{
                        username:that.username,
                        password:that.password
                    }
                }).then(function () {
                    alert("成功");
                },function (){
                    alert("失败");
                })
        }
        }
    })
</script>

5.vueapi

computed 计算属性

computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.刷新不会影响计算结果

<body>
   <div id="app">
     <h1>{{a}}</h1>
     <h1>{{b}}</h1>
     <h1>{{c}}</h1>
       <button v-on:click="m2">submit</button>
   </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
         a:11,
            b:2,
            c:0
        },
        computed: {
            m2:function (){
                this.c = this.a*this.b
            }
        }
    })
</script>

filter 过滤器

对即将显示的数据做进一步的筛选处理，然后进行显示

过滤器不会改变原来的数据，只是在元数据的基础上产生新的数据或删除一些数据然后显示出来

双括号插值内使用

msg是需要处理的数据,
filterA是过滤器,

<body>
    <div id="app">
       价格:<h1>{{a | afilter}}</h1>
    </div>
</body>
<script>
  new Vue({
        el:"#app",
        data:{
             a:200
        },
      filters:{
            //定义过滤器
           afilter(a){
               //要对属性进行什么操作
              return  this.a = a+"$"
           }
      }
  })
</script>

watch 侦听器

用于观察Vue实例上的数据变动，当数据需要随着其它数据变动而变动时，可以使用侦听属性

<body>
    <div id="app">
        姓：<input type="text" v-model="x">
    </div>
</body>
</html>
<script>
  new Vue({
        el:"#app",
        data:{
             x:"",
        },
      watch:{
            //新的值，旧的值
            x(newv,oldv){
                console.log(newv)
                console.log(oldv)
            }
      }
  })
</script>