〖Vue〗必备小知识一 Vue 初识小结小知识---Vue小结day一 Vue 是一个渐进式 JavaScript 框架

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

1.Vue 官网

cn.vuejs.org

2.Vue 是一个渐进式 JavaScript 框架

弱主张, 是数据驱动的 MVVM 框架

M(model) 数据模型层
V(view) 视图层
Vm 视图模型

环境搭建

建立项目文件夹
npm init - y
cnpm i vue --save

`$mount` 把 vue 的实例挂载到一个 dom 元素上面

选项对象: el 指定挂载的元素 data 是一个对象,主要是放置数据

{{ 差值表达式 }} 两个花括号

放置差值表达式的 html 叫做模板(template)

Vue 先操作内存里的对象(和真时 dom 结构是一样的)

常用指令

指令以 `v-` 开头

v-bind 把变量绑定到节点的属性上 v-bind:属性名=”变量” 可以简写成 : (冒号)
v-html 绑定 html 标签到节点上
v-model 双向绑定命令

视图变数据会变

数据变了视图页跟着变化

v-number 修饰符 number/lazy/trime v-model.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

v-model.number.lazy

v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

v-model.trime

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

v-if false 不渲染 true 进行渲染 v-show false display:none true 进行渲染

绑定样式 v-bind:style=’{“css 属性”:变量}’

绑定类名 v-bind:class=”{‘类名’:布尔值}”

V-bind:class=”[‘类名 1’,’类名 2’...]”

v-for <html 标签 v-for=”(变量,索引) in 数组” v-bind :key=”index”>
v-for <span v-for=”n in 数字”></span> 遍历数字
v-for <span v-for=”(value,key,index) in 对象”></span> 遍历对象

九九乘法表

padEnd() 方法如果某个字符串不够指定长度，会在头部或尾部补全。

<ul class="cfb">
  <li v-for="i in 9">
    <span v-for="j in i">{{j}}*{{i}}={{String(i*j).padEnd(2,"&ensp;")}}</span>
  </li>
</ul>

显示 26 个英语字母

<ul>
<li v-for="n in 26">
{{String.fromCharCode(n+64)}}
</li>
 </ul>

`v-on` 绑定事件 `v-on:事件的名字=”事件处理函数”`

可以简写为 @

反转字符串

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>

<body>
  <div id="box">
    {{ str }}
    <button v-on:click="reverseStr">反转字符串</button>
  </div>

  <script>
    var vm = new Vue({
      el: "#box",
      data: {
        str: "hello Vue.js", // 要显示的内容
      },
      methods: {
        reverseStr() {
          this.str = this.str.split("").reverse().join("")
        }
      }
    })
  </script>
</body>

〖Vue〗必备小知识一 Vue 初识小结