zoukankan      html  css  js  c++  java

  • Vue学习笔记

    1. 入门

      1. data:用于定义属性
      2. methods用于定义的函数
      3. {{}}用于输出对象的属性和函数的返回值
      4. 当vue实例被创建时,它向vue的响应式系统中加入其data对象中能找到的所以属性当这些属性值发生改变时,html视图也会发生相应的变化

    2. 模板语法

      1. 文本:{{}}

          <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8" />
          <title>vue测试</title>
      </head>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <body>
          <div id="app">
              <p>{{message}}</p>
              <p> {{test()}} </p>
          </div>

          <div id="vue_app">

              <p> {{message2}} </p>
          </div>
      </body>
      <script>
          new Vue({
              el: "#app",
              data: {
                  message: "Hello World",
              },
              methods: {
                  test: function() {
                      return this.message;
                  }
              }
          });
          var data = {
              message2: "Hello Vue"
          };
          var vue = new Vue({
              el: "#vue_app",
              data: data
          });
          document.write(data.message2 == vue.message2); //true
        document.write("<br>")
        document.write(vue.$data == data); //true
          data.message2 = "HELLO VUE";
      </script>
  </html>

      2. Html: v-html

      3. 属性: v-bind:url,v-html:target,v-bind:class,v-bind:id

      4. js表达式

      5. if语句

      6. 过滤器

       <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title> vue</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <style>
         .class1{
             background-color: aqua;
             font-size: larger;
         }
 </style>
     <body>
         <div id="app">
             <!-- v-html使用 -->
             <p v-html="message"></p>
             <!-- v-model与v-bind使用 -->
             <span>点击切换颜色</span>
             <input type="checkbox" v-model="test" />
             <p v-bind:class="{class1:test}">Test</p>
             <!-- vue对于js表达式的支持 -->
             <p>{{10+10}}</p>
             <p>{{flag==true?"Yes":"No"}}</p>
             <p>{{name.split('').reverse().join('')}}</p>
             <!-- v- 标签使用 -->
             <button v-on:click="a">点击切换</button>
             <p v-if="seen">you can see me</p>
             <a v-bind:href="url" v-bind:target="target">百度一下</a>
             <br />
             <!-- 双向数据绑定 -->
             <input type="text" v-model="message1" />
             <p v-html="message1"></p>
             <h2>字符串反转</h2>
             <input type="text" v-model="message2" />
             <button v-on:click="reverse">点击反转</button>
             <br />
             <!-- 过滤器 -->
             <span>原始数据:</span><input type="text" v-model="message3" />
             <span>过滤后的数据:</span>
             <span> {{message3 | format("2131")}} </span>
         </div>
     </body>
     <script>
         var vue = new Vue({
             el: "#app",
             data: {
                 message: "Hello World",
                 test: false,
                 flag: true,
                 name: "Jamin",
                 seen: false,
                 url: "http://www.baidu.com",
                 target: "_blank",
                 message1: "测试",
                 message2: "123",
                 message3: ""
             },
             methods: {
                 a: function() {
                     if (this.seen == true) {
                         this.seen = false;
                     } else {
                         this.seen = true;
                     }
                 },
                 reverse: function() {
                     this.message2 = this.message2.split('').reverse().join('');
                 }
             },
             filters: {
                 format: function(value, a) {
                     return value.charAt(0).toUpperCase() + value.slice(1) + a;
                 }
             }
         })
     </script>

     </html>

    3. 条件语句与循环语句

       <!DOCTYPE html>
 <!-- 循环判断 -->
 <html>
     <head>
         <meta charset="utf-8">
         <title>条件与循环语句</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <h1 v-if="ok">Hello Vue</h1>
             <span>输入你的成绩</span>
             <input type="text" v-model="grade">
             <span>你的等级为:</span>
             <p v-if="grade>=90">优秀</p>
             <p v-else-if="grade>=60">及格</p>
             <p v-else>不及格</p>
             <p v-show="show">123</p>
             <ul>
                 <li v-for="(value,key,index) in object">{{index}}:{{key}}:{{value}}</li>
             </ul>
             <ol>
                 <li v-for="n in 10">{{n}}</li>
             </ol>

             <ul>
                 <li v-for="people in   sites ">{{people.name}}</li>
         </ul>
         <div v-for="m in 9">
        <b v-for="n in m">
            {{m}}*{{n}}={{m*n}}
        </b>
    </div>
     </div>
 </body>
 <script>
     new Vue({
         el: "#app",
         data: {
             ok: true,
             grade: "",
             show: 213,
             object: {
                 name: "张三",
                 age: 12,
                 sex: "男"
             },
             sites: [{
                 name: "张三",
                 age: 12
             }, {
                 name: "李四",
                 age: 16
             }, {
                 name: "王五",
                 age: 18
             }]
         }
     });
 </script>
</html>

        1. v-show与v-if区别
        1. v-show在dom树中显示等同与display:none v-if直接不显示
        2. v-show消耗更高的初始渲染 v-if更多小号切换渲染
        3. v-show中定义的值为0、null、undefined、false 时为假其余为真

    1. 计算属性computed

           <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>computed</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <p>"源message"{{message}}</p>
             <p>"计算首次调用"{{reversedMessage}}</p>
             <p>"方法首次调用"{{resver()}}</p>
             <p>"计算二次调用"{{reversedMessage}}</p>
             <p>"方法二次调用"{{resver()}}</p>
         </div>
         <script>
             var i = 1;
             new Vue({
                 el: "#app",
                 data: {
                     message: "Vue"
                 },
                 computed: {
                     reversedMessage: function() {
                         i += 1;
                         return this.message.split("").reverse().join("") + i;
                     }
                 },
                 methods: {
                     resver: function() {
                         i += 1;
                         return this.message.split("").reverse().join("") + i;
                     }
                 }
             })
         </script>
     </body>
 </html>

      1.computed 与method的区别

      • computed依赖缓存

    2. 监听属性

       <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>监听属性</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <p> {{counter}} </p>
             <button @click="counter++">点击增加</button>
             <br />
             <span>千米:</span><input v-model="kilometers" type="text" />
             <span>米:</span><input v-model="meters" type="text" />
             <p id="info"></p>
         </div>
         <script>
             vue = new Vue({
                 el: "#app",
                 data: {
                     counter: 1,
                     kilometers: 0,
                     meters: 0
                 },
                 watch: {

                     kilometers: function(value) {
                         this.kilometers = value;
                         this.meters = this.kilometers * 1000;

                     },
                     meters: function(value) {
                         this.kilometers = value / 1000;
                         this.meters = value;
                     }
                 }
             });
             vue.$watch("counter", function(nval, oval) {
                 alert("以前的值" + oval + "现在变成了" + nval);
             });
             vue.$watch("kilometers", function(newValue, oldValue) {
                 document.getElementById("info").innerHTML = "以前的值" + oldValue + "现在变成了" + newValue;
             });
         </script>
     </body>
 </html>

    3. Vue表单

       <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>Form表单</title>
         <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     </head>
     <body>
         <div id="app">
             <h3>双向输出</h3>
             <input type="text" v-model="message" />
             <p> 输入的内容为:{{message}}</p>
             <br />
             <h3>单个复选框</h3>
             <input type="checkbox" id="test" v-model="checked" value="测试" /><label for="test">测试</label>
             <p>选择为{{checked}}</p>
             <h3>多个复选框</h3>
             <span>请选择:</span>
             <input type="checkbox" id="test1" v-model="check" value="测试1" /><label for="test1">测试1</label>
             <input type="checkbox" id="test2" v-model="check" value="测试2" /> <label for="test2">测试2</label>
             <input type="checkbox" id="test3" v-model="check" value="测试3" /><label for="test3">测试3</label>
             <p>选择为{{check}}</p>
             <h3>单选框</h3>
             <input type="radio" v-model="test4" value="测试4" id="test4" /><label for="test4">测试4</label>
             <input type="radio" v-model="test4" value="测试5" id="test5" /><label for="test5">测试5</label>
             <p>选择为{{test4}}</p>
             <h3>下拉框</h3>
             <select v-model="select">
                 <option value="测试1">1</option>
                 <option value="测试2">2</option>
             </select>
             <p>你的选择为{{select}}</p>
             <h3>全选 1</h3>
             <input type="checkbox" v-model="allChecked" id="allChecked" @change="checkedAll" /><label for="allChecked">全选</label>
             <span>{{allChecked}}</span>
             <br />
             <input type="checkbox" value="Test6" v-model="checkName" id="test6" /><label for="test6">Test6</label>
             <input type="checkbox" value="Test7" v-model="checkName" id="test7" /><label for="test7">Test7</label>
             <input type="checkbox" value="Test8" v-model="checkName" id="test8" /><label for="test8">Test8</label>
             <p>{{checkName}}</p>
             <h3>全选2</h3>
             <input type="checkbox" id="checkbox" v-model="checkAll" @change="allchecked" /><label for="checkbox">全选</label>
             <label v-for="list in checkList"><input type="checkbox" v-model="checkListOn" v-bind:value="list.name" />{{list.name}}</label>
             <p>{{checkListOn}}</p>
         </div>
     </body>
     <script>
         var vue = new Vue({
             el: "#app",
             data: {
                 message: "测试",
                 check: [],
                 checked: false,
                 test4: "",
                 select: "",
                 checkName: [],
                 checkArray: ["Test6", "Test7", "Test8"],
                 allChecked: false,
                 checkList: [{
                     name: "测试1"
                 }, {
                     name: "测试2"
                 }, {
                     name: "测试3"
                 }],
                 checkListOn: [],
                 checkAll: false
             },
             methods: {
                 checkedAll: function() {
                     if (this.allChecked) {
                         this.checkName = this.checkArray;
                     } else {
                         this.checkName = [];
                     }
                 },
                 allchecked: function() {
                     if (this.checkAll) {
                         var checkArray = [];
                         for (var i = 0; i < this.checkList.length; i++) {
                             checkArray.push(this.checkList[i].name);
                         }
                         this.checkListOn = checkArray;
                     } else {
                         this.checkListOn = [];
                     }
                 }
             },
             watch: {
                 "checkName": function() {
                     if (this.checkName.length == 3) {
                         this.allChecked = true;
                     } else {
                         this.allChecked = false;
                     }
                 },
                 "checkListOn": function() {
                     if (this.checkListOn.length == this.checkList.length) {
                         this.checkAll = true;
                     } else {
                         this.checkAll = false;
                     }
                 }
             }
         })
     </script>
 </html>

      修饰符

      1. .lazy: 默认情况下v-model是双向同步的,但你可以添加.lazy转变为在change事件中同步
      2. .number:自动将用户的输入值转为number类型,如果原值的转换结果为NaN则返回原值
      3. .trim:自动过滤首尾空格

    4. 组件:封装可重用的代码

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <test></test>
            <test2></test2>
            <child message="Hello Vue"></child>
            <!-- 动态绑定 -->
            <child v-bind:message="message1"></child>
            <check1></check1>
            <br />
            <p>{{total}}</p>
            <test3 v-on:increment="incrementTotal"></test3>
            <br />
            <test3 v-on:increment="incrementTotal"></test3>
        </div>
    </body>`
    <script>
        // 全局组件
        Vue.component("test", {
            template: "<h1>测试</h1>"
        });
        //局部组件
        var Child = {
            template: "<h3>测试2</h3>"
        };
        Vue.component("child", {
            //父组件用来传递数据的属性
            props: ["message"],
            template: "<h5>{{message}}</h5>"
        });
        Vue.component("test3", {
            template: '<div><button v-on:click="incrementHandler(1)">-</button>{{count}}<button v-on:click="incrementHandler(2)">+</button></div>',
            data: function() {
                return {
                    count: 0
                }
            },
            methods: {
                incrementHandler: function(value) {
                    if (value == 1) {
                        this.count -= 1;
                        this.$emit('increment', value);
                    } else {
                        this.count += 1;
                        this.$emit('increment', value);
                    }
                }
            }
        })
        //props验证(版本要是开发者版本)
        Vue.component("check1", {
            props: {
                age: {
                    //数据类型
                    type: [Number, Boolean],
                    //必填项
                    required: true,
                    //初始值
                    default: 100,

                }
            },
            template: "<h6>测试props验证{{age}}</h6>"
        })
        new Vue({
            el: "#app",
            components: {
                "test2": Child
            },
            data: {
                message1: "Hello",
                total: 0
            },
            methods: {
                incrementTotal: function(value) {
                    if (value == 1) {
                        this.total--;
                    } else {
                        this.total++;
                    }
                }
            }
        });
        /* prop是单项绑定的,当父组件的值发生变化时会传递到子组件但不会反过来 */
    </script>
</html>
    1. 自定义指令
      1. 钩子
        1. 钩子函数
          • bind:第一次绑定到元素时调用
          • insterted:被绑定的元素插入到父节点时调用
          • update:被绑定元素所在的模板更新时调用
          • comppantUpdated:被绑定元素所在模板完成一次更新周期时调用
          • unbind:只调用一次,指令与元素解绑时调用
        2. 钩子参数
          • el:指定所绑定的元素,可以直接用来操作DOM
          • binding:一个对象
            • name:指令名,不包括v-前缀
            • oldValue:指令绑定的前一个值,仅在update和compantUpdated钩子中可用
            • expreession: 绑定值的表达式或变量名
            • arg:转给指令的参数
            • modifiers:一个包含修饰符的对象
          • vnode:Vue编译出的虚拟节点
          • oldVnode:上一个虚拟节点,仅在update和compantUpdated钩子中可用
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义指令</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-focus />
            <p v-test="{color:'red',text:'测试'}"></p>
        </div>

    </body>
    <script>
        //聚焦
        Vue.directive("focus", {
            inserted: function(el) {
                el.focus();
            }
        });

        new Vue({
            el: "#app",
            directives: {
                test: {
                    inserted: function(el, binding) {
                        el.innerHTML = binding.value.text;
                        el.style.backgroundColor = binding.value.color;
                    }
                }
            }

        })
    </script>
</html>
    1. Vue路由
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
        <title>路由</title>
        <style>
            ._active {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p>
                <!-- to属性 -->
                <!-- 字符串 -->
                <router-link to="foo">Go to Foo1</router-link>
            </p>
            <p>
                <!--  使用v-bind的JS表达式 -->
                <router-link v-bind:to="'foo'">Go to Foo2</router-link>
            </p>
            <p>
                <!--不写bind -->
                <router-link :to="'foo'">Go to foo3</router-link>
            </p>
            <p>
                <!--  使用path -->
                <router-link :to="{path:'foo'}">path</router-link>
            </p>
            <p>
                <!-- 命名路由 -->
                <router-link :to="{name:'user',params:{userId:123},path:'foo'}">命名路由</router-link>
            </p>
            <p>
                <!-- 带参数查询 "/foo?test=test1"-->
                <router-link :to="{path:'foo',query:{test:'test1'}}">带参数查询</router-link>
            </p>
            <p>
                <!--  replace-->
                <router-link :to="{path:'foo'}" replace>replace</router-link>
            </p>
            <p>
                <!-- 在当前路径下追加foo 而不是跳转到foo -->
                <router-link :to="'foo'" append>append</router-link>
            </p>
            <p>
                <router-link to="foo" tag="li">li标签</router-link>
            </p>
            <p>
                <!-- 激活后的样式 -->
                <router-link to="foo" active-class="_active">active-class</router-link>
            </p>
            <p>
                <!--  当链接被精准匹配时-->
                <router-link to="foo" exact-active-class="_active">当链接被精准匹配时</router-link>
            </p>
            <!-- active-class与exact-active-class的区别 router-link默认为模糊匹配,
            当设置<router-link to="foo/1" exact-active-class> 与<router-link to="foo/1" active-class>
            当用户 点击foo时会触发active-class而不会触发exact-active-class
            -->
            <p>
                <!-- event事件 -->
                <router-link to="foo" event="mouseover">事件-当鼠标移动到这里时</router-link>
            </p>
            <p>
                <router-link to="/bar">Go to Bar</router-link>
            </p>
            <router-view></router-view>
        </div>
    </body>
    <script>
        //  定义路由组件
        const Foo = {
            template: '<div>foo</div>'
        }
        const Bar = {
            template: '<div>bar</div>'
        };
        //定义路由
        const routes = [{
                path: '/foo',
                component: Foo
            },
            {
                path: '/bar',
                component: Bar
            }
        ]
        //创建路由实例,然后传路由的配置
        const router = new VueRouter({
            routes
        });
        //创建和挂载根实例
        const app = new Vue({
            router
        }).$mount("#app");
    </script>
</html>
    1. vue过渡动画
      1. 过渡
        1. enter:定义进入过渡时的开始状态,在元素插入之前生效,在元素被插入之后的下一帧移除
        2. v-enter-active:定义进入过渡生效时的状态,在元素插入之前生效,在过渡动画完成之后移除
        3. v-enter-to:定义进入过渡的结束状态,在元素被插入之后,在元素被插入之后下一帧生效,在过渡/动画完成之后移除
        4. v-leave-active:定义离开过渡生效时的状态,在离开过渡时立即触发,在过渡完成之后移除
        5. v-leave-to:在离开过渡之后的下一帧生效,在过渡完成之后移除
          图示
      2. 自定义类名
        1. enter-class
        2. enter-active-class
        3. enter-to-class
        4. leave-class
        5. leave-active-class
        6. leave-to-class
      3. 显性过渡持续时间
        <transition :duration="1000">...</transition>
        <transition :duration="{enter:500,leave:800}" </transition>
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css" />
        <title>动画实例</title>
        <style>
            .fade-enter-active,.fade-leave-active{
            transition: opacity 2s
        }
        .fade-enter,.fade-leave-to{
            opacity: 0
        }
        .test-enter-active{
            animation:test-in .5s;
            }
        .test-leave-active{
                animation: test-in .5s reverse;
            }
            @keyframes test-in{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(1);
                }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="button" v-on:click="show=!show" value="点击" />
            <transition name=" fade">
                <p v-show="show" v-bind:style="styleobj">{{message}}</p>
            </transition>
            <transition name="test">
                <p v-show="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
            </transition>
            <transition name="test1" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
                <p v-show="show">测试1-测试2-测试3</p>
            </transition>
        </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "动画实例",
                show: true,
                styleobj: {
                    color: 'red',
                    fontsize: '30px'
                }
            }
        })
    </script>
</html>
    1. Vue混入
    2. ajax
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    </head>
    <body>
        <div id="app">info
            <div id=""></div>
            {{ info }}
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el: '#app',
                data: {
                    info: null
                }
            });
            var url = "http://how2j.cn/study/json.txt";
            axios.get(url).then(function(response) {
                var jsonObject = response.data;
                var jsonString = JSON.stringify(jsonObject);
                document.getElementById(info).innerHTML = " 数据:" + jsonString;
            })
        </script>
    </body>
</html>
    1. vue-cli
      1. 安装
        1. 安装node.jshttps://nodejs.org/zh-cn/
        2. 检测是否安装成功node --version
        3. 安装vue的脚手架npm install @vue/cli -g
        4. 创建vue项目vue create 项目名
        5. 安装路由模块npm install vue-router
        6. 安装axiosnpm install axios
        7. 启动npm run serve
      2. 目录结构
        • node-modules:模块包
        • public:存放html与title图标
        • src:用户自定义文件,assets静态文件,components自定义组件,App.vue主模块,main.js节点挂载和创建路由的实例
    ​
    作者： JaminYe
    版权声明：本文原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
  • 相关阅读:
    人生转折点：弃文从理
    人生第一站：大三暑假实习僧
    监听器启动顺序和java常见注解
    java常识和好玩的注释
    182. Duplicate Emails (Easy)
    181. Employees Earning More Than Their Managers (Easy)
    180. Consecutive Numbers (Medium)
    178. Rank Scores (Medium)
    177. Nth Highest Salary (Medium)
    176. Second Highest Salary(Easy)
  • 原文地址：https://www.cnblogs.com/JaminYe/p/11381161.html
Copyright © 2011-2022 走看看