我的vue

最新推荐文章于 2023-03-20 09:45:21 发布

进阶中的非主流坛子

最新推荐文章于 2023-03-20 09:45:21 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/just_now_and_future/article/details/85115855

版权

前言：前面已经看过一遍vue的基本语法了，但是由于没有练习，也没有重复阅读，所以在看别人写vue的时候，render明明是有记忆的，但就是不知道他是干什么的，所以我还是觉得不管学什么，形成自己的笔记很重要，即使很多东西网上都有，但是网上的东西就是自己的吗？看过就忘有什么用呢？所以用一篇博客来记录一下我自己的vue学习笔记。

1、Vue与view读音相同，是一个只关注图层、构建用户界面的渐进式框架。vue.js从名称上看是一个javaScript文件，所以应该是和js一样必须放在<script></script>中间。vue的架构是MVVM,M即Model 模型、V代表view 视图或者是叫页面渲染结果、VM代表view model，表示模型与视图间的双向操作。

【用vue需要先安装node 安装了node后npm也会跟着安装好，npm是项目管理工具，因为npm是国外的，可能会有点慢，所以可以用nrm代替：nrm下载安装命令：npm install nrm -g. ---> nrm use taobao(nrm下会有很多东西，可以用nrm -ls查看，taobao 的速度很快，可以用use切换到用taobao下载东西) 安装后要重启电脑。创建一个项目后，要先npm init -y ---->然后下载vue：npm vue --save(save代表只在当前项目安装)】

2、一个vue运用的实例，以及我自己对它的理解（可能会有误，如果我知道哪理解有误后会进行修改，要是有大佬路过看到了也可以帮忙指点一下，感恩不尽）。图中{{ }} 用于输出对象属性和函数返回值，{{}}符号叫做插值，也叫数据绑定、data 用于定义属性、methods 用于定义的函数，可以通过 return 来返回函数值。图中的vue只能作用到标签为app上。

补：data可以定义对象

补：vue中的computed属性，即计算属性，用于计算，或者说运算，计算属性从本质看是一个方法，在方法里面对属性进行运算，从而得到一个想要的结果，我得到我的目标结果。计算属性只在最开始运算了一次，以后重复使用的话不需要进行再次运算，会把运算结果进行一个缓存

3、方法的写法，某个<div>的方法全部写在与一个el:#id,id与他id相等的vue对象里，像图中的details是方法名，冒号后边是声明是函数，然后在{}里写具体的方法。

4、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。vue的创建是通过var 对象名=new Vue（{}）来创建，{}里面写数据、方法之类的。

5、 v-once指令：一次性地插值，当数据改变时，插值处的内容不会更新。（指令必须在标签里）

6、 v-html 指令：将数据输出到元素内部，如果输出数据有html代码，会被渲染（ps:不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎）

补充：v-text指令：将数据输出到元素内部，如果输出数据有html代码，会作为普通文本内容输出（name是data里面的元素）

7、 v-bind 指令：v-bind的缩写是 "："，如下：

V-bind的作用：

可以用v-bind设置样式属性

也可以用绑定返回对象的计算属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.base {
  width: 100px;
  height: 100px;
}
.active {
  background: green;
}
.text-danger {
  background: red;
}
</style>
</head>
<body>
<div id="app">
/   绑定计算属性对象
  <div v-bind:class="classObject"></div>
</div>
<script>

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})
</script>
</body>
</html>

可以把一个数组传给 v-bind:class

可以用三元表达式来切换列表中的 class ：

可以在 v-bind:style 直接设置样式

8、v-on 指令：事件绑定，可以绑定方法（methods中的方法），也可以绑定js表达式（如num++）。可用于监听 DOM 事件，参数是监听的事件名。v-on的缩写是用@，如下：

v-on的例子：当点击按钮时，iphone.count的值会随着点击的动作而发生改变。

9、条件判断

v-if : 条件判断：是否是true，是就显示内容，不是就不显示内容

v-else: 与v-if配对出现，只能用在v-if的后面

v-else-if:相当于c/c++/java里面的else if,用法也差不多，写法跟上面v-if的写法差不多

v-show:用于判断内容是否显示

10、v-for:循环语句，与c/c++/java写法有所不同， java中的写法是for(int site:sites)，而这里的写法是v-for="site in sites"。

（补充/改正图片的说明：ol是一个列表，li代表一行）

通过一个对象的属性来迭代数据：

11、v-model:与模型数据相关联，双向绑定

还可以用在checkbox（多选）、radio(单选)、select、texteara、component(vue自定义组件)等用户可以输入的内容上

12、created函数：向后台发起ajax请求，完成对data数据的初始化

13、事件修饰符&按键修饰符：

prevent运用实例：

14、动态效果往往是通过改变class和style而改变的。class可以支持数据、也可以支持对象

15、watch监控：监控前台的数据发生改变，watch监控可分为浅监控和深监控，浅监控如下：

深监控如下:

16、定义全局组件&定义局部组件：

定义全局组件

定义局部组件

进阶中的非主流坛子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的vue

前言：前面已经看过一遍vue的基本语法了，但是由于没有练习，也没有重复阅读，所以在看别人写vue的时候，render明明是有记忆的，但就是不知道他是干什么的，所以我还是觉得不管学什么，形成自己的笔记很重要，即使很多东西网上都有，但是网上的东西就是自己的吗？看过就忘有什么用呢？所以用一篇博客来记录一下我自己的vue学习笔记。 1、Vue与view读音相同，是一个只关注图层、构建用户界面的渐进...
复制链接

扫一扫