Vue快速入门

微光风笛

已于 2022-03-23 14:15:01 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： html

于 2022-03-23 14:14:42 首次发布

本文链接：https://blog.csdn.net/m0_52177571/article/details/123683245

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Vue基础

Vue简介

1、JavaScript框架

2、简化Dom操作

3、响应式数据驱动

官方网站

Vue.js (vuejs.org)https://cn.vuejs.org/index.html

官网是这样说的

对于制作原型或学习，你可以这样使用最新版本：（包含了有帮助的命令行警告，建议学习使用）

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

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：（速度快，没有警告）

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

创建Vue实例

<div id="hello">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                message:"Hello World!"
            }
        })
    </script>

el:挂载点

el:"#hello",

作用范围：el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用ID选择器

若

<div class="hello">
{{ message }}
</div>

则el:".hello"

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

data数据对象

<div id="hello">
        {{ message }}   <!--获取元素-->
        <h2>
            {{ school.name }}   <!--获取对象中的成员-->
        </h2>
        <h3>
            {{ campus }}    <!--获取整个数组-->
        </h3>
        <h4>
            {{ campus[2] }} <!--获取数组中的成员-->
        </h4>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                message:"Hello World!",
                school:{
                    name:"小明",
                    No:"202056780001"
                },
                campus:["北校区","主校区","南校区"]
            }
        })
    </script>

本地应用

v-text指令使用

<div id="hello">
        <h2 v-text="message+'!'">郑州</h2>  <!--覆盖文字-->
        <h2>{{ message +'!'}}郑州</h2>  <!--部分替换，保留文字-->
    </div>
    <script>
        var app = new Vue({
            el:"#hello",
            data:{
                message:"Hello World!",
            }
        })
    </script>

v-html指令使用

<div id="hello">
        <p v-html="content"></p>    <!--自动解析标签-->
        <p v-text="content"></p>    <!--不会解析标签-->
    </div>
    <script>
        var app = new Vue({
            el:"#hello",
            data:{
                content:"<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>

v-on指令

<div id="hello">
        <input type="button" value="点击" v-on:click="doIt(你好呀,'小仙女~')">  <!--   v-on标记事件  -->
        <input type="text" @keyup.enter="sayHi">    <!--   @为v-on:的简写   -->
    </div>
    <script>
        var app = new Vue({
            el:"#hello",
            methods: {
                doIt:function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("输入完毕！");
                }
            },
        })
    </script>

v-show指令（频繁切换）

根据表达式的真假，切换元素的显示和隐藏

<div id="hello">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-show="true">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-show="isShow">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-show="a>=0">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                isShow:false,
                a:0
            }
        })
    </script>

v-if指令应用

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

使用与v-show类似

<div id="hello">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-if="true">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-if="isShow">
        <img src="./images/study/CSDN.jpeg" title="显示失败" v-if="a>=0">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                isShow:false,
                a:0
            }
        })
    </script>

v-bind指令

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

<div id="hello">
        <img v-bind:src="imgSrc" title="显示失败">
        <img :src="imgSrc" title="显示失败">
        <img src="./images/study/CSDN.jpeg" title="显示失败">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                imgSrc:"./images/study/CSDN.jpeg"
            }
        })
    </script>

v-for

根据数据生成列表结构

<div id="hello">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index+1 }}校区:{{ item }}    <!--index是下标，item是一个指代，指代数组中的元素-->
            </li>
        </ul>
    </div>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                arr:["北校区","主校区","南校区"],
            },
        })
    </script>

v-model

获取和设置表单元素的值（双向数据绑定）

<div id="hello">
        <input type="text" v-model="massage">   <!--双向数据绑定，改变值双向数据改变-->
        <h1>{{ massage }}</h1>  <!--显示值的变化-->
    </div>
    <script>
        var hello = new Vue({
            el:"#hello",
            data:{
                massage:"Hello World!"  //定义的初始值
            },
        })
    </script>

网络应用

axios

功能强大的网络请求库

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

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})

axios.post(地址,{key:value,key2:values}).then(function(response){},function(err){})

微光风笛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门

Vue基础Vue简介1、JavaScript框架2、简化Dom操作3、响应式数据驱动官方网站Vue.js (vuejs.org)https://cn.vuejs.org/index.html官网是这样说的对于制作原型或学习，你可以这样使用最新版本：（包含了有帮助的命令行警告，建议学习使用）<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>对于生
复制链接

扫一扫