vue大前端框架的基本命令

最新推荐文章于 2024-07-19 18:41:59 发布

data_area

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量43

点赞数

分类专栏：前端文章标签： vue.js vue

本文链接：https://blog.csdn.net/m0_74897528/article/details/132253123

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue原理概述

vue通过中间的viewModel对象进行对数据的监控和绑定，发现数据有变化会重新渲染页面
当监听到页面上的值发生变化会同步数据到数据源，实现数据的双向绑定

使用步骤
1》引入vue.js
2》声明viewModel对象管理的dom区域
3》创建viewModel对象

vue的基本指令
1》内容渲染
{{变量名}} 可以出现在双标签之间不能写在标签的属性里
v-html 可以将标签元素进行解析后在页面上展示
v-text 只以文本的形式展示数据

<body>
<!--2.指定管理区域-->
<div id="app">
    <!--类容渲染 {{}} v-html v-text-->
    <p>{{message}}</p><!--双花括号不能用在元素属性里-->
    <p v-html="url"> </p>
    <p v-text="url"></p>
    <p>{{url}}</p>
</div>
</body>
<!--1.引进vue.js-->
<script src="js/vue.js" type="application/javascript"></script>

<script>
    /*创建vuemodel实例*/
    var vue=new Vue({
        el:"#app",
        data:{
            message:"你好，xjh",
            url:"<a href='www.baidu.com'>进入百度 </a>"
        }
    })
</script>

运行结果

2》属性绑定
v-bind:或缩写: 用于单向绑定该元素的某个属性的值

<body>
<div id="app">
    <!--v-bind  省略写法:-->
    <button v-bind:disabled="message" >6666</button>
    <a :href="url">点我</a>
</div>
</body>
<script src="js/vue.js" type="application/javascript"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:true,
            url:"http://www.baidu.com",
        }
    })
</script>

3》事件绑定
v-on:(click,keydown...)或缩写@(click,keyup...) 用于绑定事件函数

<body>
<div id="app">
    <!--v-on  省略写法@-->
    <button v-on:click='go()'>6666</button>
    <input @keydown.enter='le()' type="text"/>
</div>
</body>
<script src="js/vue.js" type="application/javascript"></script>
<script>
    /*创建vuemodel对象*/
    new Vue({
        el:"#app",
        data:{
            message:true,
            url:"http://www.baidu.com",
        },
        /*事件方法*/
        methods:{
            go(){
                alert("6666");
            },
            le(){
                location.href=this.url;
            }
        }
    })
</script>

4》双向绑定
v-model 绑定data中的某个变量的值当页面上的值变化时会跟着变化

<body>
<div id="app">
    <!--v-bind单向绑定  v-model双向绑定 -->
    双向：<input type="text" v-model="message"/>
    单向： <input type="text" :value="message" />
    <p>{{message}}</p>
    <select v-model="city">
        <option value="0">长沙</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>
    <p>{{city}}</p>
</div>
</body>
<script src="js/vue.js" type="application/javascript"></script>
<script>
    /*创建vuemodel对象*/
    new Vue({
        el:"#app",
        data:{
            message:"最美城市",
            city:2
        },
    })
</script>

5》条件渲染
v-if v-ifelse v-else 当条件为true 在页面上添加该元素为false时删除该元素
v-show 当条件为true 该元素样式为空为false时该元素样式为display none;不展示

<body>
<div id="app">

    <input type="checkbox" v-model="sta">
    <p v-if="sta">已选择</p>
    <p v-else>未选择</p>

    <p v-show="sh">我出来了</p>
    <button @click="zuo" type="button"> 给我滚</button>
</div>
</body>
<script src="js/vue.js" type="application/javascript"></script>
<script>
    /*创建vuemodel对象*/
    new Vue({
        el:"#app",
        data:{
            sh: true,
            sta:true
        },
        /*事件方法*/
        methods:{
            zuo(){
                this.sh=!this.sh;
            }
        }
    })
</script>

6》列表渲染
v-for="(item,index) in array" 对数组进行循环 :key="item.id" 使每行的key唯一

<body>
<div id="app">
    <table>
        <tr v-for="(city,index) in cities" :key="city.id" :title=" 'c'+index">
            <td>{{city.id}}</td>
            <td>{{city.cityName}}</td>
            <td>{{city.decs}}</td>
            <td>{{index}}</td>
        </tr>
    </table>
</div>

</body>
<script src="js/vue.js" type="application/javascript"></script>
<script>
    /*创建vuemodel对象*/
    new Vue({
        el:"#app",
        data:{
            cities: [
                {id:1,cityName:"长沙",decs:"旅游城市"},
                {id:2,cityName:"上海",decs: "贸易城市"},
                {id:3,cityName:"北京",decs: "首都"},
                {id:4,cityName:"南京",decs: "交通枢纽"}
            ]
        }
    })
</script>