vue基础语法 - L_gs

vue基础语法

VUE

基本语法

挂载点el
template优先内容显示（覆盖），没内容会找dom结构
data方法返回一个对象数据驱动视图

{

字符串
布尔值
三元表达式
对象，和模板大括号之间要有空格

指令系统

v-text:用的较少，和{{}}效果一样，文本
v-html: dom结构一定要有根标签
v-if: dom的创建和销毁
v-show: display属性的显示隐藏
v-for = "(item,index) in 数组名" {{item.获取属性}} 优先级最高
v-for = "(value,key) in 对象名" {{value.获取属性}} 优先级最高
v-bind:class="{active:isShow}",return中定义isShow的真假（简写v-bind可以省略）
v-on:原生事件名="方法名"(@事件名 )
methods:

v-model实现双向绑定

v-bind:value='msg',v-on:input=''双向绑定原理

局部组件

声明组件
挂载组件components:{}
插入组件

全局组件（无需挂载）

Vue.component('组件名称',{
template:""
})
直接可以使用

组件传值

父传子

父组件中给子组件绑定属性名
子组件中声明props:['属性名']

子传父

子组件绑定事件
事件中写 this.$emit('父中子组件名') 触发
父组件接收到组件事件进行处理
进行操作

插槽slot

组件引用时可以预留文本内容
具名插槽
给内容指定空
slot加name属性，引用者加slot属性，二者属性值要相同

模仿ele 不同type展示不同样式

原理：利用父组件传子组件，通过父组件传过来的type值动态绑定class展示不同的样式

过滤器（给你的数据锦上添花）

（局部过滤器）在组件内部使用filters:{
过滤器的名字:function(value){//value为传进来的数据
内部一定要return
}
}
（全局过滤器）Vue.filter('过滤器名字'，function(value){return})
调用过滤器：数据属性|过滤器的名字

watch(监听单个属性)

watch:{
msg: function(newV,oldV){
if(newV === 'tusir'){
执行操作
}
}
}

计算属性（小demo）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .selected{
            background:#ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <audio :src="getCurrentIndex" autoplay controls></audio>
       
        <ul>
            <li v-for="(item,index) in musicData" @click="changeHandler(index)" :class='{selected:currentIndex===index}'>
                <h2>{{item.id}}-歌名：{{item.name}}</h2>
                <p>{{item.author}}</p>
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    
    <script>
        let musicData = [
    {id:1,name:'少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'},
    {id:2,name:'Please Dont Go ',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
    {id:3,name:'Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},
    {id:4,name:' Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
    ];
        new Vue({
            el: '#app',
            data(){
                return{
                    musicData: musicData,
                    currentIndex: 0
                }
            },
            computed: {
                getCurrentIndex(){
                 return   this.musicData[this.currentIndex].songSrc
                }
            },
            methods:{
                changeHandler(index){
                    this.currentIndex = index;
                }
            }
        })


    </script>
</body>
</html>

生命周期

定义：

每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

钩子函数的执行时间

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

还有两个特殊的（配合使用keep-alive）：activated、deactivated

activated

keep-alive组件被激活时调用

deactivated

keep-alive组件被停用时调用

钩子函数中该做的事情

created

实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。

mounted

实例已经挂载完成，可以进行一些DOM操作

beforeUpdate

可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

destroyed

可以执行一些优化操作

keep-alive

在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

posted on 2020-06-15 20:27 L_gs 阅读(16) 评论(0) 收藏举报

刷新页面返回顶部