Vue特性

VUE

<div id="app">
	{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
	var app = new Vue ({
        el: "#app",
        data: {
            message: 'Hello Vue!'
        }
	})
</script>

M-V-VM

• MVVM是Model-View-ViewModel的简写。
• M-V-VM VM:ViewModel 用于连接model和view
• M-V-VM M:model 用于定于和管理数据

MVC

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

CDN

• CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

单页应用不利于优化

Object.define.Property

// 定义一个对象
const obj = {}
// 定义中间值过渡
let v = 20
// 使用Object.defineProperty来定义一个x的值
Object.defineProperty(obj, 'x', {
    // 每次调用 obj.x 这个方法的时候会自动执行 return 上面定义的v
    get () {
        return v // 返回值
    }，
    // 每次使用 obj.x = 某个值 这个set方法的时候就会自动执行 set方法的参数就是你的  某个值
   	set (newValue) {
        // 把新的值赋给v 下次执行obj.x取出来的值就是新的值
        v = newValue
        // 每次赋值过来，就重新渲染Dom
        setCountDomText()
   	}
})

特性检测

// 检测是否支持...   格式固定
'borderRadius` in documemnt.createElement('div').style
 true
// 检测是否为触屏
'ontouchstart' in window
false

proxy

const obj = new Proxy({}, {
            set (obj, prop, value) {
                obj[prop] = value
            },
            get (obj, prop) {
                return obj[prop]
            }
        })

插值表达式 v-text

• vue指令都是 v-指令 这种格式，一旦使用了指令，虽然写的值看起来是字符串，因为我们使用 “值”，但是这个值已经是JavaScript，所以下面的代码实际上会报错

• <div v-text="实际上这里已经是JavaScript，而不是普通的字符">{{msg}}</div>
  

• v-html 输出正确的 不带html 标签转义的内容，就需要使用v-html指令

• v-cloak 这个样式，只有再Vue实例化之前才有效

  <style>
          [v-cloak] {
              display: none;
          }
  </style>
  <div id="root" v-cloak>
              <div>{{msg}}</div>
          </div>
          <script src="/vue.js"></script>
          <script>
              setTimeout ( () => {
                  const app = new Vue({
                      el: "#root",
                      data: {
                          msg: 'Hello 1901'
                      }
                  })
              },2000)
          </script>
  

• v-for = “item in list” 用于循环渲染数据 还可以便利对象，数字

• v-if 是直接从dom节点中把该节点移除或插入

• v-show 是通过改变style.display来确定该节点是否显示，这种是css的显示和隐藏的操作，对于需要频繁切换显示和隐藏的节点，特别实用，比如：弹窗，手机注册和邮箱注册的两个tab的切换

• v-on v-on:事件名 用于绑定一个事件，这个事件里可以直接操作data里的数据 v-on：事件名可以缩写成 @事件名

• vue里的方法必须写在methods里面

• v-bind 属性 用于动态绑定元素的属性 可以直接简写成为 :属性

• v-text

  <div id="root">
          <div v-text="'这里是v-text的内容'">{{msg}}</div>
          // 这里是v-text的内容
          <div v-text="msg"></div>
          // 1901
          <div>{{msg}}</div>
          // 1901
          <div>{{content}}</div>
          // <p>这是后台<b>富文本编辑器</b>生成的<span style="font-size: 18px;">内容</span></p>
          <div v-html="content"></div>
          // 这是后台富文本编辑器生成的内容
      </div>
      <script src="/vue.js"></script>
      <script>
          const app = new Vue({
              el: "#root",
              data: {
                  msg: '1901',
                  content: '<p>这是后台<b>富文本编辑器</b>生成的<span style="font-size: 18px;">内容</span></p>'
              }
          })
      </script>
  

• 事件可以不加括号，接收参数为e，如果不加括号，则传递要的值过去，也可以用$event参数同时接收e参数

• v-model 实现双向绑定

• 按键修饰符 <button @click.enter ="">

• .stop阻止事件默认行为

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

• 按键修饰符 必须写到methods上面

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

事件之间可以相互调用