首页 > 其他分享> > vue学习笔记

vue学习笔记

2022-01-18 13:58:15 作者：互联网

文章目录

0.准备工作
1.声明式渲染
2.条件渲染
3.列表渲染
4.事件处理
5.表单输入绑定
6.vue组件
7.计算属性
8.插槽

0.准备工作

https://cn.vuejs.org/v2/guide/installation.html

在这里插入图片描述
下载好的vue.js可以放在js文件中。

实验工具：vscode编译器。

1.声明式渲染

声明式渲染：将数据渲染进DOM中，也就是网页中。

<!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>声明式渲染</title>
  <script src="./js/vue2.js"></script>
</head>
<body>
      <div class="app">  
          {{message}}
      </div>
      <script>
           var app=new Vue({
              //element的缩写是el，作用：挂载元素 。
              el:".app",   //id是#     class是.
              data:{
                   message:"学习Vue!"
              }
           })
      </script>
</body>
</html>

参考网址：

https://cn.vuejs.org/v2/guide/index.html

2.条件渲染

条件渲染：通过条件的判断，将数据渲染在网页上，类似于后端的if语句。

<!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>条件渲染</title>
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="type === 'A'">看书</div>
        <div v-else-if="type === 'B'">跑步</div>
        <div v-else-if="type === 'C'">编程</div>
        <div v-else>其他</div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                type:'C'  //通过修改type的值，来改变渲染的数据
            }
        })
    </script>
</body>
</html>

参考网址：

https://cn.vuejs.org/v2/guide/conditional.html

3.列表渲染

列表渲染：对多个数据进行渲染，并且代码中有数组的影子，类似于后端的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>列表渲染</title>
    <script src="./js/vue2.js"></script>
</head>
<body>
     <ul id="example-1">
          <li v-for="color in colors">
              {{color.message}}
          </li>
     </ul>
    <script>
        var app = new Vue({
            el:"#example-1",
            data:{
                colors:[
                    {message:'red'},
                    {message:'green'},
                    {message:'blue'}
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

参考网址：

https://cn.vuejs.org/v2/guide/list.html

4.事件处理

事件处理：在网页中单机某个按钮，就会调用方法，执行JavaScript代码。

<!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>事件处理</title>
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="example-1">
        <button v-on:click="greet">Greet</button>
    </div>
    <script>
        var app = new Vue({
            el:"#example-1",
            data:{
                message:"play chess"
            },
            methods:{
                greet:function(){
                    alert(this.message);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

参考网址：

https://cn.vuejs.org/v2/guide/events.html

5.表单输入绑定

表单输入绑定：一般在表单中输入内容之后，会进行双向绑定，会不断地选择方法更新所对应的数据。

<!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>表单输入绑定</title>
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="app">
        <!-- 双向绑定 -->
        <input type="text" v-model="message"/>   <!-- 输入绑定 -->
        <p>输入的内容:{{message}}</p>   <!-- 单向绑定 -->

        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>高级</option>
            <option>中级</option>
            <option>初级</option>
        </select>
        <span>选择的级别:{{ selected }}</span>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"OK",
                selected:''
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

参考网址：

https://cn.vuejs.org/v2/guide/forms.html

6.vue组件

vue组件：可以重复使用的vue文件。

<!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>vue组件</title>
    <!-- 组件是一组被重复使用的模板 -->
    <script src="./js/vue2.js"></script>
</head>
<body> 
     <div id="app">
        <ul>
            <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
        </ul>
     </div>
     <script>
         //定义一个组件
         Vue.component("my-component-li",{
             props:["item"],
             template:'<li>{{item}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                items:["egg","fruit","food"]
             }
         })
     </script>
</body>
</html>

在这里插入图片描述

参考网址：

https://cn.vuejs.org/v2/guide/components.html

7.计算属性

计算属性：将计算后的结果缓存起来，转换成静态。

<!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>计算属性</title>
    <!-- 计算属性：将计算后的结果缓存起来，转换成静态。 -->
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="app">
        <p>当前时间方法：{{getCurrentTime()}}</p>
        <p>当前时间属性：{{getCurrentTime1}}</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                getCurrentTime:function(){
                    return Date.now();
                }
            },
            //计算属性
            computed:{
                getCurrentTime1:function(){
                    return Date.now();
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

从图中观察，得出的计算属性会转成静态，而另一个方法获取的时间会一直变化。

参考网址：

https://cn.vuejs.org/v2/guide/computed.html

8.插槽

插槽：在某一个部分进行数据的使用，类似于自定义组件、自定义标签。例如，定义标题组件、内容组件等。

<!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>插槽</title>
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items>
        </todo>
    </div>
    <div> 
        <slot name="todo-title"></slot>
        <ul> 
            <slot name="todo-items"></slot>
        </ul>
    </div> 
    <script>
        //定义 待办事项 组件
        Vue.component("todo",{
            template:'<div> <slot name="todo-title"></slot><ul> <slot name="todo-items"></slot></ul></div>'
        });
        //定义 待办事项-标题 组件
        Vue.component("todo-title",{
            props:['title'],
            template:"<div>{{title}}</div>"
        });
        //定义 待办事项-内容 组件
        Vue.component("todo-items",{
            props:['item',"index"],
            template:"<li>{{index}}--{{item}}<button @click='remove'>删除</button></li>",
            methods:{
                remove:function(){
                    this.$emit("remove");//自定义事件
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                title:'标题',
                items:["book","water","river"],
            },
            methods:{
                removeItems:function(index){
                    this.items.splice(index,1);  //删除
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

参考网址：

https://cn.vuejs.org/v2/guide/components-slots.html

标签：el,vue,渲染,vuejs,app,笔记,学习,Vue,message
来源： https://blog.csdn.net/William_fang/article/details/122557761