vue简述

vue为渐进式框架:vmmv

1.易用

        有html、css、javascript基础,即可学习vue框架

2.高效、开发前端页面 非常高效

        1.vue的体积小、压缩完只需要20k的大小

        2.超快的虚拟dom操作js中非常多的dom操作,vue设计虚拟dom非常快

        3.设计时vue底层深度优化

3.灵活、开发灵活、多样性

vue的入门开发 :

1.下载vue.js并引用

 vue中各对象获取参数的写法:


        

                        //对象数据
                

{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}


                

                        //数组数据
                        {{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
                


                

                        //集合对象
                        {{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
                        {{users[0].sex}}-- {{users[0].salary}}
                


                


                        {{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
                        {{users[1].sex}}-- {{users[1].salary}}
                


                


                        {{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
                        {{users[2].sex}}-- {{users[2].salary}}
                


        


v-text和v-html的使用和区别 

 

        //获取vue对象中key为msg的value

       

{{msg}}

        //在标签内获取vue对象中key为msg的value值,直接获取内部文本信息

       

        //在标签内获取vue对象中key为content的value值,但是如果值中有html标签则可以解析html标签中的信息,输出其中的样式和内容

       

 vue中的绑定事件

事件的三要素:事件源、事件、监听器

        1.事件源:发生特定动作的html

        2.事件:发生特定动作 单击事件、双击事件、鼠标移出移入等

        3.监听器:当标签上发生特定事件时处理的程序一般在js中称为事件处理函数

 vue中绑定事件基本语法,事件处理函数的写法

   //js中事件的写法为:οnclick="method()",vue中双向绑定的写法为:v-on:事件  名               ="function()",可省略为@事件名v-on:click="clickMethod"等同于@click="clickMethod",且如果方法没有形参列表,可省略扩号

       

 this的使用

       

 {{msg}}

       

       

        

v-show和v-if、v-bind的使用

v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏

v-if 底层通过控制dom树的元素节点实现(增删改查操作)页面元素展示或隐藏

v-show和v-if的选择:

        v-show:有更高的初始渲染,通过css样式的display实现隐藏,需要频繁切换,则使用

        v-if:有更高的切换消耗,通过删除、添加dom元素,运行时条件很少改变,则使用v-if

v-bind可操作标签中的css样式属性,例:

  //v-bind

'

你可能感兴趣的:(vue.js,前端,javascript)