vue.js 6.21

最新推荐文章于 2024-09-06 22:20:29 发布

weixin_45038216

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量82

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45038216/article/details/118099481

版权

一,前期知识回顾

绝对路径：两种：根目录；线上

相对路径：自身为基础的路径

二,进入vue.js

2.1vue初识

渐进式:逐渐进入项目，很多页面，某一部分或所有换成vue.js，数据驱动视图

框架：vue.js是个框架

库与框架的区别

库：jQuery 是库，某部分的封装

jQuery作用：简化代码，解决兼容性问题

js 的兼容性：event兼容性，获取滚动事件的高度

框架：完整的解决方案，使用框架，能够提高开发的效率；

mvc与mvvm 的区别

mvc 后端的分层概念

control负责调度，model和view没有直接联系

m:model 模型层

v：view 视图层前端页面，用接口与model模型层建立关系

c:controller:调度层接受请求->调用模型->根据结果派发页面并经过模型处理返回相应的数据

mvvm 前端的分层概念

m:model 模型层

v：view 视图层前端页面，用接口与model模型层建立关系在代码中是el控制的区域

VM：把control改变成viewModel（绑定view和v-model达成view与数据的强耦合）

MVVM主要解决了MVC中大量的dom操作使得页面渲染性能降低，加载速度变慢，影响用户体验和，当 Model 频繁发生变化，开发者需要主动更新到View的问题

2.2 vue 语法

<body>
    <!--视图层   html的内容-->
    <div id="app">
    

      <div v-cloak>{{msg}} {{num1+num2}}</div>
    </div>
  </body>
</html>
<!-- <script src="./vue-2.4.0.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
//  创建实例化vue，得到  vuemodel
  let vm = new Vue({
    //   控制区域
    el: "#app",
    // 数据  data参数存放我们的数据，这一层就是mvvm里的model层
    data: {
      msg: "hello word2!",
      num1: 5,
      num2: 6,
      
    },
    // 方法
    methods: {},
  });
</script>

2.3. 插值表达式、v-cloak、v-text、v-html

两个花括号

v-cloak 防止闪烁

· v-text：会替换掉元素里的内容

· v-html：可以渲染html界面

2.4.属性绑定 v-bind：可简写成：

) 界面元素属性值的绑定  括号里不加引号的都是我们data里的数据读取

如果想使用字符串需要加上引号

<input type="text" :value=" 'msg' "> 'msg' 字符串

里面可以写表达式

里面也可以调用定义好的方法，拿到的是方法的返回值

绑定事件：v-on 可简写成@

v-on:click="函数名" 简写 @click="函数名"

2.5事件修饰符：

.stop 阻止冒泡从里到外
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式从外到里
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

2.6 v-model 数据的双向绑定绑定的是表单元素

3.Vue中样式的使用

使用class样式:

· 数组类名，类名

· 三木表达式

· 数组内置对象（对象的键是样式的名字对象的属性名是类名，值是bool类型）

· 直接通过对象

weixin_45038216

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 6.21

一,前期知识回顾绝对路径：两种：根目录；线上相对路径：自身为基础的路径二,进入vue.js2.1vue初识渐进式:逐渐进入项目，很多页面，某一部分或所有换成vue.js，数据驱动视图框架：vue.js是个框架库与框架的区别库：jQuery 是库，某部分的封装jQuery作用：简化代码，解决兼容性问题js 的兼容性：event兼容性，获取滚动事件的高度框架：完整的解决方案，使用框架，能够提高开发的效率；mvc与mvvm的区别mvc 后端的分层概念...
复制链接

扫一扫