Vue入门(个人理解)

目录

1、vue是什么

2、vue能做什么

3、vue的特点

4、el和data以及methods作用

5、插值表达式

6、指令

7、指令详细用法

---

 1、vue是什么

        vue是专注于view层的一套构建用户界面的渐进式前端js框架，采用的是自底向上增量开发的设计，核心库只关注视图

2、vue能做什么

        1、几乎没有dom操作    

        2、适合做单页web网站开发(spa(SinglePageApplication)项目开发)    

        3、传统网站开发

3、vue的特点

        通过指令扩展了HTML，通过表达式绑定数据到HTML

4、el和data以及methods作用

      1、el 作用：

            1、指定/设置 当前vue实例所管理的视图

            2、值也可以是其他选择器(class等) - 如果有多个同名的只有第一个会生效，所以推荐使用                    id选择器

            3、值也可以是dom元素 - document.getElementById("id名")

            注意：不能让el直接管理html或者body   报错！

      2、data 的作用：

            1、指定/设置 当前vue实例所管理的视图中要使用的数据

            2、data值可以是一个对象

            3、data中的数据可以通过vue实例对象，属性名(vm.msg) 去访问，也可以通过                                     vm.$data.msg形式去访问

            特点：响应式数据(当数据变化时，视图中数据的位置会自动发生变化)

      3、method 作用：

            1、可以在methods模块里面书写方法，模块里的this指向的是当前vue实例对象

            注意： 不推荐使用箭头函数，this指向的不是vm对象

5、插值表达式

           用法： {{ data中的数据 }}        

            注意：在var a=10  if   for 中不能写插值表达式

6、指令：

            1、所有指令都是v-开头

            2、所有指令都在开始标签位置

            3、每个指令都是为了取代dom操作

7、指令详细用法

            1、v-text 作用：替换标签的全部内容 -- 会替换{{}}插值表达式的位置(插值表达式被替换而                    不能显示)

            2、v-html 作用：替换标签的全部内容 -- v-html可以识别字符串中的标签和js代码

可以看到p标签中间 {{ text }}取值被v-text和v-html标签取代了 ，而且h1标签被v-html解析了

               注意：不推荐使用v-html 安全问题(容易受到xss - 跨站脚本攻击)

            3、v-on 作用：绑定事件     语法： @事件名.修饰符=" methods中的方法 "     

                 常用修饰符：once和prevent

 

 

 点击按钮后触发v-on绑定的事件函数

                 注意： $event表示当前事件对象

            4、v-for (最终写法原因 -- key值要求是唯一值，渲染效率更高)：    -> vue建议我们每个循                 环遍历的标签li 加key属性

                1、数组：使用方法 -- (value，index)in data中的数组名

                2、对象： 使用方法 -- (value，key，index)

                最终写法：数组 -- <li v-for="(v,i) in 数组" :key="i"></li>    对象 -- <li v-for="(v,k,i) in 对                       象" :key="i"></li>

 

 

            5、v-bind 作用：绑定任何不确定的标签的属性值    

                  语法：v-bind：要绑定的属性名="data中的数据"

 图中和src绑定了，所以src是可变的，可以在data里随时修改图片路径
            6、v-model 作用：绑定表单元素(textarea、input、radio、checkbox) 

                 语法：v-model="data中的数据"    

         

好啦，今天的学习到这咯，文章有什么问题可以在评论区指正，拜拜啦