Vue学习---01：了解和认识

最新推荐文章于 2022-05-29 09:20:51 发布

luohzzz

最新推荐文章于 2022-05-29 09:20:51 发布

阅读量114

点赞数

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/luohzzz/article/details/119711078

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、Vue的认识Vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。引入 Vue安装引入进入官网进行安装然后在html中写入<script src="https://cdn.jsdelivr.n

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

Vue的认识

Vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
引入 Vue
安装引入
进入官网进行安装
然后在html中写入

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

基本使用

<!-- html方面 -->
<div id="app">
  {{ message }}
</div>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- vue代码 -->
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

绑定元素等
分别展示了v-text、v-html、v-on
v-text绑定文本，输出文本
v-html绑定html部分，输出html并被浏览器编译
v-on绑定监听事件，click，keyup等等

<!-- html方面 -->
    <div id="app">
        <h2 v-text = "message + '!' "></h2>
        <h2 v-text = "inon"></h2>
        <h2>{{message+'!'}}</h2>
        <p v-html = "contnet"></p>
        <p v-text = "contnet"></p>
    </div>
    <!-- 导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vue代码 -->
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    message:'H2',
                    inon:'luohuan',
                    contnet:'<a href="https://www.baidu.com/">bd</a>',
                }
            }
        )
    </script>

在这里插入图片描述

<!-- HTML -->
    <div id = "app">
        {{message}}
        <br/>
        {{ school.name }}
        <br/>
        <ul>
            <li>
                {{math[0]}}
            </li>
            <li>
                {{math[1]}}
            </li>
        </ul>
        <br/>
        <input type="button" value="v-on点击" v-on:click="doi">
        <input type="button" value="v-on-->@" @click="doi">
        <input type="button" value="v-on双击" @dblclick="doi">
    </div>
    <!-- 导入VUE -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vue代码 -->
    <script>
        var app = new Vue(
            {
                el : '#app',//el : ''
                data: {
                    message:'hello!',
                    school:{
                        name : "luo",
                        age : 22
                    },
                    math:["luohuanzhao","xiaozhao"]
                },
                methods:{
                    doi:function(){
                        alert('hello!')
                    }
                }
            }
        )
    </script>

在这里插入图片描述

Vue指令

1.v-show、v-if、v-bind
v-show绑定show文本，html标注会在浏览器中显示，display：none
v-if如果v-if=“false”，html标注不会在浏览器中显示
v-bind动态绑定属性事件

<body>
    <!-- 指令：v-show、v-if、v-bind -->
    <!-- html -->
    <div id="app">
        <p @mousemove="change" @click="change1">
             djj
        </p>
        <img v-show = "isShow" src="../img/R-C (2).jpg" alt="" width="50" height="50" >
        <br>
        <img v-show = "age>=16" src="../img/R-C (2).jpg" alt="" width="50" height="50">
        <br>
        <img v-if="isIf" src="../img/R-C (2).jpg" alt="" width="50" height="50">
        <br>
        <img v-bind:src="imgSrc" alt="" width="50" height="50">
        <br>
        <img :src="imgSrc" alt="" width="50" height="50">
    </div>
    <!-- 引用vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vue代码 -->
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    isShow:false,
                    age:18,
                    isIf:false,
                    imgSrc:"../img/1.jpg"
                },
                methods:{
                    change:function(){
                        this.isShow = !this.isShow
                    },
                    change1:function(){
                        this.isIf = !this.isIf;
                    },
                    change2:function(){
                    }
                }
            }
        )
    </script>
</body>

<body>
    <div id="app">
        <img :src="imgArr[index]" alt="" width="100" height="100">
        <br>
        <input type="button" @click="next" value="下一张" v-show="index<=5">
        <input type="button" @click="pest" value="上一张" v-show="index!=0">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue(
            {
                el:"#app",
                data:{
                    imgArr:[
                        "../img/1.png",
                        "../img/2.png",
                        "../img/3.jpg",
                        "../img/4.jpg",
                        "../img/5.jpg"
                ],
                    index:0
                },
                methods:{
                    next:function(){
                        this.index++;
                    },
                    pest:function(){
                        this.index--;
                    }
                }
            }
        )
    </script>
</body>

2.v-for、v-model
v-for相当于for循环
v-model引用axios进行外部使用

<body>
    <!-- html部分 -->
    <div id="app">
        <input type="button" value="111" @click="click" >
        <ul>
            <li v-for="item in arr" v-show = "isIf">
                {{item}}
            </li>
        </ul>
        <p v-for="item in Arr">
            {{Arr[1].name}}
        </p>

        <hr>
        <br>

        <input type="text" v-model="me" @keyup.enter="up">

        <br>

        <p> 你输入的是：{{ me }}</p>
    </div>
    <!-- vue引用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vue代码 -->
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    me:"",
                    isIf:true,
                    arr:["你好","hello","世界","world"],
                    Arr:[
                        {name:"HELLO"},
                        {name:"你好"},
                        {name:"世界"}
                    ]
                },
                methods:{
                    click:function(){
                        this.isIf = !this.isIf;
                    },
                    up:function(){
                        alert(" 你输入的是："+this.me)
                    }
                }
            }
        )
    </script>
</body>

<body>
    <div id="app">
        <input type="text" v-model="inputV" @keyup.enter="add" >
        <ul>
            <li v-for="(item,index) in list">
                <div>
                    <span>{{ index+1 }}.</span>
                    <label >{{ item }}</label>
                    <button @click="remove(index)">-</button>
                </div>
            </li>
        </ul>
        <p>{{ list.length }}条事项</p>
        <button @click = "clear">clear</button>
    </div>
    <!-- vue引用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    list:["你好"],
                    inputV:""
                },
                methods:{
                    add:function(){
                        this.list.push(this.inputV),
                        text = "";
                    },
                    remove:function(index){
                        this.list.splice(index,1)
                    },
                    clear:function(){
                        this.list = [];
                    }
                }
            }
        )
    </script>
</body>

axios

<!-- axios导入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

接口：

随机一条笑话
https://autumnfish.cn/api/joke
调用天气接口
http://wthrcdn.etouch.cn/weather_mini

在这里插入图片描述

等等······

使用：

<body>
    <div id="app">
        <input type="text" v-model="city" @keyup.enter="setWeather">
        <ul>
            <li v-for="item in list">
                {{item.date+' '+item.type+' '+item.high+' '+item.low+' '+item.fengxiang}}
            </li>
        </ul>
    </div>
    <!-- vue引用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios导入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 
        调用天气接口
        http://wthrcdn.etouch.cn/weather_mini
     -->
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    city:"",
                    list:[]
                },
                methods:{
                    // axios.相关代码
                    setWeather:function(){
                        var thst = this;
                        axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                        .then(function(response){
                            console.log(response.data.data.forecast);
                            thst.list = response.data.data.forecast
                        }).catch(function(err){})
                    }
                }
            }
        )
    </script>
</body>

小练习

<body>
    <!-- html -->
    <div id="app">
        <!-- input -->
        <input type="text" v-model="quely" @keyup.enter="seen">
        <!-- ul -->
        <ul>
            <li v-for="item in music" >
                <a href="" @click="play(item.id)"></a>
                <b>
                    {{item.name}}
                </b>
            </li>
        </ul>
        <div>
            <audio ref='audio' :src="musicUrl" aria-valuetext="bf"></audio>
        </div>
    </div>
    <!-- vue引用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios导入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- vue -->
    <script>
        var app = new Vue(
            {
                el:"#app",
                // data
                data:{
                    quely:"",
                    music:[],
                    musicUrl:""
                },
                //music搜索
                methods:{
                     //music搜索   https://autumnfish.cn/search 
                    seen:function(){
                        var that = this;
                        axios.get("https://autumnfish.cn/search?keywords="+this.quely)
                        .then(function(response){
                            that.music = response.data.result.songs;
                        },
                        function(err){})
                    },
                    //music播放    https://autumnfish.cn/song/url
                    play:function(id){
                        var thar = this;
                        axios.get("https://autumnfish.cn/song/url?id="+id)
                        .then(function(response1){
                            thar.musicUrl = response1.data.data[0].url;
                        },
                        function(err){}
                        )
                    }
                }
            }
        )
    </script>
</body>

luohzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习---01：了解和认识

一、Vue的认识Vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。引入 Vue安装引入进入官网进行安装然后在html中写入<script src="https://cdn.jsdelivr.n
复制链接

扫一扫

专栏目录