学习vue

最新推荐文章于 2024-05-17 14:32:46 发布

知受

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量97

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_70237997/article/details/130161596

版权

1.什么是vue

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。
在GitHub上，该项目平均每天能收获95颗星，[为Github有史以来星标数第3多的项目。
Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。
Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue最早发布于2014年2月。
作者在Hacker News、Echo JS与Reddit的/r/javascript版块发布了最早的版本。一天之内，Vue就登上了这三个网站的首页。Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中，Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

2.VUE是做什么的？

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发

3. 在webstorm中创建工程

（1）引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

（2）body创建一个div标签

<body>
    <div id="app">
        {{msg}}
    </div>
</body>

（3）创建自己的js代码

  <script type="text/javascript">
     
      var app=new Vue({
            //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
     
            data:{
                 msg:"ikun粉丝",
            }
      })
  </script>

4 el属性:

1.el属性

vue中el属性的作用是指示vue编译器解析的位置，是一个占位符。

2.data属性

vue中data属性的作用是用于将组织从view中抽象出，可以将视图的数据抽象出来并存放在data中。

3.template属性

vue中template属性的作用是设置模板，使用template属性可以替换页面中的元素或占位符。

4.methods属性

vue中methods属性的作用是用于放置页面中的业务逻辑，一般用于放置js方法。

5.computed属性

vue中computed属性是一个计算属性，常用于处理一些复杂逻辑。

6.watch属性

vue中watch属性是一个监听属性，通过watch属性可以响应数据的变化。

5. vue指令

5.1 v-text 和v-html设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="cxk">
    <span v-text="aa">喜欢的明星</span><hr>
    <!--v-text:无法解析html标签  v-html可以解析html标签-->
    <span v-html="aa">喜欢的明星</span><hr>
</div>
</body>
<script>
    let  app=new Vue({
        el:"#cxk",
        data:{
            aa:"<font color='red'>我是蔡徐坤粉丝</font>"
        }
    })
</script>
</html>

运行结果

5.2 v-on基础设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="cxk">
    <span>{{msg}}</span>
    <button v-on:click="fun">鸡</button>
    <!--上面的v-on:缩写为@-->
    <button @click="fun">鸡2</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#cxk",
        data:{
            msg:"喜欢和鸡哥打篮球"
        },
        methods:{
            fun(){
                this.msg="喜欢和鸡哥打唱歌";
            }
        }
    })

</script>
</html>

5.3 v-show 和v-if根据表达值的真假,切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="app">
    <img src="imgs/2.jpg" width="200" v-show="age>18&&age<36"/>
    <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
    <img src="imgs/1.jpg" width="200" v-if="age>20&&age<36"/>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
        age:20
        },
        methods:{
            fun(){
                this.age++;
            }
        }
    })
</script>
</html>

5.4 v-bind设置元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="app">
    <!--如何让img标签中src属性引用vue对象中的数据-->
    <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

    <!--v-bind: 缩写为: -->
    <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

    <button @click="fun">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:20,
            images:"imgs/1.png",
            title:"鸡哥",
            falg:true
        },
        methods:{
            fun(){
                this.imgurl="imgs/2.png";
                this.title="兰奇"
            }
        }
    })
</script>
</html>

5.5 v-fo循环数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="app">
    <ul>
        <!--for(数据类型 b:数组){}-->
        <li v-for="(item,index) in hobby">
            {{item}}--->{{index}}
        </li>
    </ul>

    <table width="500px" border="1" cellspacing="0" class="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in users">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="deleteUser(item.name)">删除</button>
                <button >编辑</button>
            </td>
        </tr>
    </table>


    <input type="text" @keyup.enter="fun()"/>
</div>
</body>
<script>
    let  app=new Vue({
        el:"#app",
        data:{
            hobby:["好吃","好喝","好色","好赌"],
            users:[
                {"name":"蔡徐坤","age":16,"sex":"男"},
                {"name":"丁真","age":19,"sex":"男"},
                {"name":"老八","age":15,"sex":"男"}
        },
        methods:{
            deleteUser(name){
                alert(name);
            },
            fun(){
                alert("触发了回车键");
            }
        }
    })
</script>
</html>

5.6 v-model获取和设置表单元素的值. input select textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="app">
    <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
    <input type="text" v-model="name" />
    <button @click="cxk"> 鸡</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            name:"蔡徐坤"
        },
        methods:{
            cxk(){
                this.name="鸡哥"
            }
        }
    })
</script>
</html>

6. vue结合axios以及后台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="wrap" id="app">
        <div class="logo" src="img/logo.png" alt="logo"></div>
        <div class="from_group">
            <input
            type="text"
            class="input_txt"
            placeholder="请输入查询数据"
            v-model="sname"
            />
            <button class="input_sub" @click="searchWeather">搜索</button>
        </div>
        <table width="300" border="1">
            <tr>
                <td>名字</td>
                <td>年龄</td>
            </tr>
            <tr v-for="item in student">
                <td>{{item.sname}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>

<script>
    let app=new Vue({
        el:"#app",
        data:{
            student:[],
            sname:"",
        },
        methods:{
            searchWeather() {
                axios.post("http://localhost:8080/student/list/1/5", {sname:this.sname}).then(result => {
                        this.student = result.data.data.records;
                    })

            }
        }
    })
</script>
</body>

</html>

知受

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue

vue中data属性的作用是用于将组织从view中抽象出，可以将视图的数据抽象出来并存放在data中。vue中template属性的作用是设置模板，使用template属性可以替换页面中的元素或占位符。vue中methods属性的作用是用于放置页面中的业务逻辑，一般用于放置js方法。vue中watch属性是一个监听属性，通过watch属性可以响应数据的变化。vue中computed属性是一个计算属性，常用于处理一些复杂逻辑。vue中el属性的作用是指示vue编译器解析的位置，是一个占位符。
复制链接

扫一扫