vue学习笔记（一）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

VUE

jQuery类库 选择器

前端框架

vue是一款渐进式的JavaScript框架，用动态构建用户界面。

  • 遵循MVVM模式

  • 编码简洁、体积小、运行效率高，适合移动端/PC端的开发

  • 本身只关注UI，可以秦松引入vue插件或者其他第三库开发项目

  • 国内大规模使用、生态系统完美

MVVM模式：

model：模型

viewModel：中间连接的桥梁

View：视图

双向数据绑定：现在这个不能跟用户交互，都是直接展示的，也就是说，模型（Model）的内容发生变化，会直接更新到视图中。同理，视图这边（比如说用户输入东西或者其他）发生变化，也是同步到模型这边。

{{ }}语法说明：

  • {{ }}可以插入文本，上面的案例就是；

  • {{ }}中可以插入JavaScript表达式；

  1. {{ number + 1 }}

  2. {{ ok ? 'YES' : 'NO' }}

  3. {{ message.split(' ').reverse( ).join(' ') }} //把一个消息空格分隔，然后反转（倒着输出）

  • {{ }}中只支持表达式，不支持其它语句

  1. <!-- 这是语句，不是表达式 -->

  2. {{ var a = 1 }}

  3.  

  4. <!-- 流控制也不会生效，请使用三元表达式 -->

  5. {{ if (ok) { return message } }}

{{ }}表示可以在里面插入内容

v-test：

用于渲染普通文本，替换标签全部内容。

{{}}会替换出现插值表达式的位置

v-text和{{}}表达式渲染数据，不解析标签。

v-html：

如果你想输出真正的 HTML，你需要使用v-html指令，v-text仅渲染标签，不能解析 HTML 代码。

替换标签全部内容

v-html可以识别字符串中的标签

v-html不仅可以渲染数据，而且可以解析标签。

注意：动态渲染的HTML容易导致XSS攻击，只对可信内容使用v-html插值，绝对不要对用户提供的内容使用插值，不推荐使用v-html

v-bind：

  • {{ }}、v-text、v-html语法不能作用在HTML标签的属性上；

  • v-bind指令可以用于响应式的更新HTML标签的属性

<div title="{{message}}"></div>是无法使用的，后台会报错，要使用v-bind

这种标签属性的话用法：

如果isButtonDisabled的值是null、undefined或false，则disabled attribute甚至不会被包括在渲染出来的<buttion>元素中。

缩写：

<!-- 缩写 -->

<a :href="url"></a>

<button :disabled="disabled"></button>

可以直接使用:不用写v-bind

v-on：

绑定事件

点击增加一次

缩写：

js部分可以同上张图不改变，直接在@click中只能书写这些简单的，复杂的方法只能在methods中去定义

methods中定义方法：

funCount不能写做funCount(),funCount是（是事件：是放什么的时候才调用这个函数）在这只是声明一下，点的时候才调用这个函数

funCount()是调用函数

以上是 vue学习笔记（一） 的全部内容， 来源链接： utcz.com/z/376190.html

回到顶部