Vue 的基础_vue roletype 关键字-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46287150/article/details/121959684

一：引入 vue.js

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>

二：第一个 vue 程序


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vue2</title>
    <!--1.引入vue.js-->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
<!--view视图-->
 <div id="app">
     <input type="text" />
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model数据*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

在这里插入图片描述

三：基础语法

v-bind

作用：用于绑定数据和元素属性的

<body>
    <div class="app">
        <a v-bind:href="url">点我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
当我们在控制台改变 url 时，对应也会变化。
相同的，我们还可以绑定图片 src 属性、超链接的class

<body>
    <div class="app">
        <a v-bind:href="url">点我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

v-bind语法糖（简写）写法

<div class="app">
	  <a v-bind:href="url">点我</a>
</div>

可写为

<div class="app">
        <a :href="url">点我</a>
</div>

v-if，v-else

作用：判断（true / false）

v-if,v-else

<body>
    <div id="app">
        <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>

v-if,v-else-if,v-else

<body>
    <div id="app">
        <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='pd'">皮蛋</div>
        <div v-else>您无权访问！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

v-for

1、v-for循环普通数组

<body>
    <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>

2、v-for循环对象数组

<body>
    <div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'贾志杰'}
                ],
             }
         });
     </script>
</body>

3、v-for循环对象

<body>
    <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

4、v-for循环数字

<body>
    <div id="app">
        <p v-for="count in 5">这是第{{count}}次循环</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>

四：绑定事件

语法：

v-on:事件名 = “方法名”
简写： @事件名 = “方法名”
事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，完整示例：

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--1.引入vue.js-->
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">点我加1</button>
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

v-on的语法糖（简写）写法

<button v-on:click="count+=1">点我加1</button>

可写为

<button @click="count+=1">点我加1</button>

五：表单双向绑定

v-model

你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
示例1：

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

在这里插入图片描述
示例2：

<body>
    <div id="app">
        <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                gender:'' 
                }
        });
    </script>
</body>

在这里插入图片描述
示例3：

<body>
    <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 selected:'' 
                }
         });
     </script>
</body>

在这里插入图片描述