《Vue.Js》基本使用

Posted 2021-05-01 风雪幻林

1. Vue.Js概述：

• 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

• Vue.Js的 CDN 方法:http://www.bootcdn.cn/vue/

加法计算器例子：

• v-model 是用来把输入控件和 model 中某个属性进行绑定(双向绑定)

• v-on:click="calcAdd"表示当点击这个按钮的时候执行 methods 中名字为 calcAdd 的方法

• 在Vue的methods段中定义的方法中this，表示当前Vue对象的data模型中的

2. 数据绑定：

2.1 双向绑定：

View 和 Model 的改变可以影响对方

2.2 单向绑定：

双大括号使用：

<span title="{{i3}}">{{i3}}</span>需要修改成下面这样

<span v-bind:title="i3">{{i3}}</span>

• v-bind后的名为标签的属性名

2.3 html原样输出：

在标签中添加属性：

<span v-html="msg"></span>

3. 数据显示遍历：

3.1 节点的展示：

<span v-show="i1>10">节点显示隐藏</span>

<span v-if="i1>10">节点添加删除</span>

3.2 遍历数据：

• 往节点中附加数据this.person.push()

4. computed函数：

• computed 中定义的函数，可以当成数据一样用

• 定义在 computed 中可以利用缓存
  

• 当msg发生变化才调用Test2方法

5. 数据过滤：