vue学习笔记

文章目录

0.准备工作

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

vue学习笔记
下载好的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>

vue学习笔记

参考网址:

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>

vue学习笔记

参考网址:

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>

vue学习笔记

参考网址:

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>

vue学习笔记

参考网址:

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>

vue学习笔记

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


参考网址:

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>

vue学习笔记

参考网址:

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

上一篇:jsp标签,jstl标签,EL表达式


下一篇:巧用vue自定义指令修改elementUI组件