Vue入门笔记（1）

程序员文章站 2022-06-06 23:37:47

...

目录结构

一、vue对象创建

vue中常用属性

二、vue常用指令
三、vue过滤器

全局过滤器
私有过滤器

四、Vue的生命周期

一、vue对象创建

<html>
<head>
<!-- 导入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
    </div>
    <script>
       //通过构造函数创建Vue对象
        var vm = new Vue({
            el:'#app', //表示控制 id为App的div
            data:{
                msg:'123',
                msg2:'<h1>haha</h1>',
                mytitle:'自定义的title'
            }
        });
    </script>
</body>
</html>

vue中常用属性

在Vue对象中有一些常用的属性以及function，下面对其总结：

var vm = new Vue({
    el:'#app',
    template: , //模板定义
    router： , //注册router对象
    data:{
        'firstname':'',
        'lastname':'',
        'fullname':''
    },
    methods: {
        show() {
            alter('hello')
        }
    },
    与下面等价
    /*
    methods: {
        show:function() {
            alter('hello')
        }
    },
    */

    //私有过滤器
    filters : {
        filter_name:function(data, param1) {

        }
    },
    //指令
    directives: {
        'fontweight': {
            bind:function(el, binding) {
                el.style.fontWeight = binding.value
            }
        },
        'fontsize':function(el,binding) {//缩写形式  等同与将函数注册到bind和updated中 
            el.style.fontSize = binding.value
        }
    },
    components: {//私有组件 为当前vue实例创建组件

    },
	watch : {//监听器 监听数据改变 可以监听dom元素(例如文本框改变)以及非dom元素改变(例如路由路径改变)
        'firstname':function(newValue, oldValue) {//表示监听data中firstname字段，如果firstname字段有变化则执行该函数
          console.log("firstname新值："+newValue+" firstname旧值："+oldValue)
        },
        '$route.path':function(newValue, odlValue) {//表示监听 路由路径改变 其中$route为路经对象
          console.log("route.path新值："+newValue+" route.path旧值："+oldValue)
        }
    },
    computed: {
         //使用方法：自定义属性以及处理函数
         //注意事项：
         //   在使用时直接使用属性名称即可，不需要(),就能调用对应的方法
         //   属性处理函数中，一般会依赖一些data中数据，只要依赖的数据有变化就会出发 属性函数的执行，
         //                例如：firstname改变了，这个fullname属性函数就会执行
         //   属性函数结果会被缓存起来，如果属性函数中依赖的数据没有变化，即使属性被多次使用，
         //                属性函数也不会被调用，而是直接使用缓存下来的结果
         //   属性函数必须return一个值而watch中的函数可以没有return
        'fullname':function() {
            return this.firstname + '-' + this.lastname;
        }
    },
    //生命周期分为：创建时期、运行周期、销毁时期
    //创建时期：生命周期函数
    beforeCreate() {
        //vue中data methods没有被初始化
    },
    created() {
        //vue中data、methods已经初始化
    },
    beforeMount() {//执行此函数时 模板已经编译好了，但尚未挂载到html页面中

    },
    mounted() {//mounted表示实例已经创建完毕

    }

    //运行时期：生命周期函数
    beforeUpdate() {//表示vue实例的data有更新执行，但还没有渲染页面

    },
    updated() {//渲染页面完成之后

    }

    //销毁期间
    beforeDestroy() {//vue实例 从运行阶段进入销毁阶段

    }
    destroyed() {

    }
})

二、vue常用指令

1、v-cloak 用于解决插值表达式闪烁问题（网页加载慢）

<html>
<head>
<style>
   [v-cloak] {
       display: none;
   }
</style>
</head>
<body>
<p v-cloak>{{ msg }}</p> <!-- msg为vue实例中data下面的属性 -->
</body>
</html>

2、v-text 用于代替插值表达式 ,没有闪烁问题

<body>
<h4 v-text="msg"></h4> <!-- msg为vue实例中data下面的属性 -->
</body>

3、v-html可以解析html标签， v-text和插值表达式是原样输出并不会解析html标签

<body>
 <!-- msg2为vue实例中data下面的属性 例如msg2='<h3>h3的标题</h3>'-->
`<div v-html="msg2"></div>`
</body>

4、v-bind是vue中用于绑定属性的指令，缩写形式为:（冒号）,例如：

<body>
<!-- 按钮的title值为 vue实例中data下面mytitle属性值拼接上123 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
<!-- 和上面等价
<input type="button" value="按钮" :title="mytitle + '123'">
-->
</body>

5、v-on 用于事件绑定, 缩写形式是@

<body>
   <!-- 其中show是vue实例中method下面一个方法 -->
   <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show">
   <!-- 和上面等价
      <input type="button" value="按钮" v-bind:title="mytitle" @click="show">
   -->
</body>

v-on包含一些子属性：

属性名	说明	使用
stop	@click.stop=“function-name”	阻止冒泡事件
prevent	@click.prevent=“function-name”	阻止默认行为，例如`<a>`标签默认行为是跳转，表单有submit行为
self	@click.self=“function-name”	表示只触发自己的事件
once	@click.prevent.once=“function-name”	只触发一次
capture	@click.capture=“function-name”	捕获事件

举例说明：
once：表示超链接默认行为只阻止一次

<a href="www.baidu.com" @click.prevent.once="function-name"></a>

capture：
默认(冒泡方式)：点击btn按钮出发的事件，先btn click 然后在div click事件
加了capture属性：先发生div click 再触发btn click

<div id="app">
    <div class="inner" @click.capture="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>
</div>

6、v-mode 唯一个双向数据绑定,只能用于表单元素
通过修改文本框txt2的内容会同步修改文本框txt1中的内容，反之则不行

<h4>{{ msg }}</h4>
<!-- v-bind只能实现单向数据绑定 从 M 到 V -->
<input type="text" name="txt1" id="txt" v-bind:value="msg" style="width: 100%;">
<!-- v-model指令可以实现 表单元素和Model中数据 双向数据绑定 -->
<input type="text" name="txt2" id="txt" v-model="msg" style="width: 100%;">

7、v-for 就是for循环，用于迭代数组、对象、数字

<p v-for="(value, index) in list"> {{index}} --- {{value}} </p>

注意事项：

v-for 循环的时候 key属性只能使用 number或string
key在使用的时候必须使用v-bind指令进行属性绑定，指定key的值
在组件中使用v-for循环的时候，可能会出现一些问题，因此需要指定key属性
v-for的时候可以in 函数，例如： v-for="(value, index) in function_name()" ，但是函数必须返回return list对象

8、v-if 和 v-show
v-if：每次重新删除/创建dom操作
v-show：不会操作dom操作，只是切换display:none样式

<!-- 通过vue中变量 flag来控制元素是否显示 -->
<h1 v-if="flag">v-if控制元素</h1>
<h1 v-show="flag">v-show控制元素</h1>

9、v-if 和 v-else 逻辑控制操作
10、自定义Vue指令–directive
Vue支持用户自定义指令，通过directive实现。指令按照作用域划分为：全局指令和私有指令。
directive内部支持的属性：

属性名	说明	备注
bind	每当指令绑定到元素上时会执行一次function 只执行一次	常用
inserted	当元素插入到DOM中的时候会执行function，可触发多次	常用
update	当dom 节点更新的时候会执行，可触发多次
unbind	解绑

全局指令

<div id="app">
  <input type="text" name="txt" id="txt" v-model="mypmsg" style="width: 100%;" v-focus>
</div>
<script>
    Vue.directive('focus', {
        bind:function(el) {//每当指令绑定到元素上时会执行一次function 只执行一次
            //el表示当前绑定元素，el是原生的DOM对象
            //样式相关放到 bind中
        },
        inserted:function(el) {//当元素插入到DOM中的时候 会执行function，可触发多次
            //行为相关的 放到 inserted中
            el.focus();
        },
        update:function() {//当dom 节点更新的时候 会执行，可触发多次
        },
        unbind:function() {
        }
    });
    var vm=new Vue({
    });
</script>

私有指定
私有指令实际是在Vue实例对象中directives中定义相关属性

三、vue过滤器

Vue允许自定义过滤器，过滤器常用于文本格式之类，例如时间字符串格式化。按照作用域分为全局过滤器和私有过滤器

全局过滤器

<!-- 过滤器 通过 管道符号| 进行处理 -->
<p> {{ dateTimeString | formatTime }} </p>
<script>
Vue.filter('formatTime', function(now) {
    var dt = new Date(now)
    var year = dt.getFullYear();
    var month = dt.getMonth() + 1;
    var day = dt.getDate();
    return `${year}-${month}-${day}`;//模板字符串
})
</script>

私有过滤器

在vm实例中定义filters，并且增加函数

过滤器注意事项：

过滤器只能用于 插值表达式和v-bind中。
私有过滤器优先级高于全局过滤器，即私有过滤器与全局过滤器重名，则使用私有过滤器

四、Vue的生命周期

一个Vue实例从创建到销毁整个过程会经过多个阶段，我们可以通过相应的生命周期函数(钩子函数)在实例化过程中做一些事情，例如：我们可以在created阶段调用vue实例中methods下面某些方法。Vue提供的生命周期函数有：

创建时期

    beforeCreate() {
        //vue中data methods没有被初始化
    },
    created() {
        //vue中data、methods已经初始化
    },
    beforeMount() {//执行此函数时 模板已经编译好了，但尚未挂载到html页面中

    },
    mounted() {//mounted表示实例已经创建完毕

    }

运行时期

    //运行时期：生命周期函数
    beforeUpdate() {//表示vue实例的data有更新执行，但还没有渲染页面

    },
    updated() {//渲染页面完成之后

    }

销毁时期

    //销毁期间
    beforeDestroy() {//vue实例 从运行阶段进入销毁阶段

    }
    destroyed() {

    }

Vue下一篇

Vue入门笔记（1）

目录结构

一、vue对象创建

vue中常用属性

二、vue常用指令

三、vue过滤器

全局过滤器

私有过滤器

四、Vue的生命周期

【java框架】SpringMVC(1)--SpringMVC入门

ETL-Kettle学习笔记（入门，简介，简单操作）

Nginx学习笔记（一）——入门

【学习笔记之CSS+DIV】CSS入门_html/css_WEB-ITnose

spring框架学习笔记1：搭建测试

nginx反向代理笔记（1）整合tomcat

PHP学习笔记1-常量，函数，php学习笔记1-常量_PHP教程

Java入门笔记3~~Eclipse编写程序

OpenCV基础课程笔记09模糊图像（1）

JavaScript精粹读书笔记(1,2)