VUE学习笔记01

1:创建好vue项目然后新建一个html，通过cdn的方式引入vueVue常用7个属性1：el属性用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。2：data属性用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。3：template属性用来设置模板，会替换页面元素，包括占位符。4：methods属性放置页面中的业务逻辑，js方法一般都放置在m

夜色架构师

376人浏览 · 2022-02-15 16:01:31

夜色架构师 · 2022-02-15 16:01:31 发布

1:创建好vue项目然后新建一个html，通过cdn的方式引入vue

Vue常用7个属性

1：el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

2：data属性

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

3：template属性

用来设置模板，会替换页面元素，包括占位符。

4：methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

5：render属性

创建真正的Virtual Dom

6：computed属性

用来计算

7：watch属性

watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

2:接下来创建一个简单的div使用el:绑定，将新建的vue和元素绑定起来：

请添加图片描述

<body>

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

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

    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }

    });
</script>

3：v-bind="…" （指令）类似于 {{ …}}

  <span v-bind:title="message">
            鼠标悬停查看绑定信息
        </span>

将鼠标移动到这地方就可以看到绑定信息

4：v-if v-else v-else-if:

    <div id = "app"> 
        <h1 v-if="ok">YES</h1>
        <h1 v-else>NO</h1>
    </div>

请添加图片描述

<body>
    <div id = "app"> 
        <h1 v-if="type ==='A'">A</h1>
        <h1 v-else-if="type ==='B'">B</h1>
        <h1 v-else>C</h1>
    </div>
    
</body>

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

    var vm = new Vue({
        el:"#app",
        data:{
        type: 'A'
        }

    });
</script>

5:循环 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue.js -->
   
</head>
<body>

    <div id = "app"> 
        <li v-for="item in items">
            {{item.message}}
        </li>
    </div>
    
</body>

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

    var vm = new Vue({
        el:"#app",
        data: {

            items: [
              {message:'范涛之'},
              {message:'邓思佳'}
            ]
      
        }

    });
</script>
</html>

6: 事件：

<body>
    <div id = "app"> 
        <button v-on:click="sayHi">click me </button>
    </div>
    
</body>

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

    var vm = new Vue({
        el:"#app",
        data: {
            message:"范涛之啦啦啦"
        },
        methods: {  //方法必须定义在VUE的Method对象中,v-on：事件
            sayHi: function(){
                alert(this.message)
            }
        }
    });
</script>

请添加图片描述

7：vue双向绑定：v-model

<body>
    <div id = "app"> 
     输入的文本： <input type="text" v-model="message"></input> {{message}}
    </div>
    
</body>

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

    var vm = new Vue({
        el:"#app",
        data:{
            message:"123"
        }
       
    });
</script>

请添加图片描述

单选框：

<body>
    <div id = "app"> 

        性别：
        <input type="radio" name="sex" value="男" v-model="qinjiang">男</input>
<!-- v-model 可以进行双向的数据绑定 -->
         <input type="radio" name="sex" value="女" v-model="qinjiang">女</input>
         选中了谁 :{{qinjiang}}
    </div>

    
</body>

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

    var vm = new Vue({
        el:"#app",
        data:{
         qinjiang:''
        }
    });
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^