【Vue】Vue初步学习

VUE 学习

<div id="app">{{ a }}</div>

<script>
    var data = {a:1}
    var vm = new Vue({
        el:'#app',
        data:data
    })
</script>


1、Object.freeze(obj); # 阻止修改obj的属性
2、Vue暴露的实例属性和方法，都有前缀$，以便与用户定义的属性区分开
例如： $data  $el  $watch
vm.$data == data
3、$watch可以观察某个属性变化之前和之后的值
vm.$watch('a',function(newVal,oldVal){
    
})

4、v-once指令，执行一次性插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个值将不会改变：{{ msg }}</span>

5、v-html指令 ：{{}}大括号会把数据默认当成文本，如需输出html，则需使用v-html标签

<p v-html></p>

6、v-bind指令：绑定属性
<div v-bind:id="qq"></div>
7、v-if v-if-else v-else
8.修饰符 .stop 当前执行完会停止
<span @click="click1">
    <span @click.stop = "click2"></span>
</span>
有.stop执行完click2就不会执行click1
没有.stop执行完click2,继续执行click1

9、class和style绑定

<div
    class="test"
    v-bind:class="{redBtn:isRed,greenBg:isGreen}"
    v-bind:class="['redBtn','greenBg']"
    v-bind:class="[isRed ? 'redBtn' : '',]"
    v-bind:style="{color:colorP,background:backgroundP}"
>

Hello VUE

</div>

<script>

    vm = new Vue({
        el:"#app",
        data:{
            isRed:true,
            isGreen:true,
            colorP:'#FFF',
            backgroundP:'#000ddd'
        }
    });

</script>

<style>
.test{}
.redBtn{}
.greenBg{}
</style>

10、v-show 的元素会一直渲染，只是通过简单的控制显示或不显示
<div id="app">
    <h1 v-show="ok">Hello H1!</h1>
</div>

<script>

    vm = new Vue({
        el:"#app",
        data:{
            ok:true //如果是true就显示，false则不显示
        }
    });

</script>

11、v-for 列表渲染

<li v-for="item in items">
    {{ item.message }}
</li>
<li v-for="val in Object" >
    {{ val }}
</li>

<li v-for="item,index in items" :key="index">
    {{ index }}
    {{ item.message }}
</li>

<li v-for="val,key in Object" :key="key">
    {{ key }}
    {{ val }}
</li>

加了key值，列表就有了唯一性，会根据key自动排序

<script>

</script>

12、简写 v-bind:key 等同于 :key
v-on:click 等同于 @click


13、事件处理：v-on:click
<button v-on:click="counter += 1"></button>
<button v-on:click="greet"></button>

有时候需要在内联语句中访问原始DOM事件，可以用 $event 把它传入方法

<button v-on:click="greet('str',$event)"></button>

<script >
    vm = new Vue({
        el:'#app',
        data:{
            counter:100
        },
        methods:{
            greet:function(str,event){
                console.log(str);
                console.log(event);
            }
        }
    });
</script>

14、事件修饰符 (多个修饰符可以串联)
.stop //阻止事件继续
.prevent //不在重载页面
.capture //
.self
.once
.passive

15、表单输入绑定
v-model 双向绑定
16、组件
this.$emit('clicknow',this.count) //触发函数
组件中，通过<slot></slot>插槽，方便组件动态插入HTML代码
17、组件注册
全局注册
局部注册