Vue.js框架的基本知识

最新推荐文章于 2024-01-02 14:19:43 发布

楠佩忆心轩

最新推荐文章于 2024-01-02 14:19:43 发布

阅读量382

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_52391639/article/details/124763568

版权

html 标签标记浏览器解析标签渲染网页网页内容(骨架)

css 级联样式表只是用来修饰网页外观，不能进行内容的添加，主要将html语言中的内容和表现形式分离浮动，定位，字体，背景

JavaScript 脚本语言，嵌套在网页中，可以为网页添加动态效果，相当于Java中的事件，为面向对象的语言，无需编译，在浏览器中直接运行，所以无法使用编译软件查看其是否存在语法错误等错误，但是可以在浏览器中的开发者模式中查看出错的地方

1、相应客户端鼠标事件和键盘事件

2、页面表单数据验证

3、改变标签的样式

前端框架：一套完整的解决方案，提供了前端项目整体解决方案

前端组件：针对某个方面进行封装，是对数据和方法的简单封装

Vue.js：一款js框架，对js的语法进行封装简化

特点：体积小，运行效率高，双向数据绑定，生态丰富，学习成本低

ElementUI：是一款UI(用户界面)框架，封装很多常用的前端组件，布局，表单，表格···

MVVM (Model-View-ViewModel)

M:model 数据模型从后端获取

V:view html

VM:viewModel 指的就是vue框架，可以实现数据与视图的双向绑定，任意一方改变，由vue框架自动进行更新原生的js操作dom对象，只关心数据

注意：vue中的双向绑定不能给body和html标签挂载

vue指令：

插值表达式布盒覆盖标签中的内容，不能解析标签

v-text和v-html会覆盖标签中的内容，v-text不能解析标签，v-html能解析标签

v-on用来实现JavaScript中的事件，调用某个特定和方法

v-show 会更改标签中的display属性，使标签隐藏起来，但不删除标签，执行效率高

v-if 会直接删除标签，如果要使标签重新显示的话，需要重新进行渲染，执行效率低

v-else 是在v-if指令后使用，如果v-if中的条件不满足时，则会执行v-else中的内容，前提是两个指令必须相挨

v-model 设置，获取表单元素的值，也就是表单元素中的value属性

v-bind 绑定其他标签的属性的值例如：

<img v-bind:src="imgChange"><!-- 相当于图片标签中的src属性和vue中的imgChange元素进行了双向绑定 -->

v-for 用来循环的指令

<body>
        <div id="app">
            <select>
                <option v-for="c in city">{{c}}</option>
            </select>
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr v-for="(user,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                </tr>
            </table>
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    city:["北京","天津","上海"],
                    users:[{name:"jim1",age:20},{name:"jim2",age:20},{name:"jim3",age:20}]
                }
            })
        </script>
    </body>

楠佩忆心轩

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue.js框架的基本知识

html 标签标记浏览器解析标签渲染网页网页内容(骨架)css 级联样式表只是用来修饰网页外观，不能进行内容的添加，主要将html语言中的内容和表现形式分离浮动，定位，字体，背景JavaScript 脚本语言，嵌套在网页中，可以为网页添加动态效果，相当于Java中的事件，为面向对象的语言，无需编译，在浏览器中直接运行，所以无法使用编译软件查看其是否存在语法错误等错误，但是可以在浏览器中的开发者模式中查看出错的地方1、相应客户端鼠标事件和键盘事件2、页面表单数据验证3、改变标签
复制链接

扫一扫