Vue部分总结

2020-03-05 21:42:12 作者：互联网

Vue总结

1、指令：

v-bind，
v-if="seen"，
v-for="todo in todos"，
v-on 指令添加一个事件监听器，
<button v-on:click="reverseMessage">逆转消息</button>

v-if：
1、v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，
完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。
2、v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。
相比之下，v-show 要简单得多 - 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

v-if和v-show的区别? v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。
2、常用指令有哪些？
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on v-on:click=“doThis(item)”
v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式
v-bind:href=“myurl”
v-bind:id=“myid”
v-bind可以缩写为 :属性 ,例如 :href=“myurl”
示例 :id :class :href :title :src :style :key :value

v-bind:class="{ active: isActive }" ：当isActive变量为true时，动态添加active 类class
v-model
v-for的使用 i 是索引

<ul>
  <li v-for="(item, i) in msg">
    <a href="#javascript:">{{i}}  {{item.hotWord}}</a>
  </li>
</ul>
msg:[
    {hotWord: "zz1"},
    {hotWord: "zz2"},
    {hotWord: "zz3"},
    {hotWord: "zz4"}
  ],

3、表单

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">

{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {

selected: 'A',
options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
]
}
})

默认选中A的下拉框。
4、组件基础：
组件是可复用的vue实例，
5、条件渲染：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

6、事件处理：
在表单及元素上创建双向数据绑定
它会根据控件类型自动选取正确的方法来更新元素。
子组件接收：
7、学习使用Promise

https://blog.csdn.net/heshuai…
有没有一种方法可以让写法像同步，而本质是异步化呢？
Promise 就出来了。
一：优点和缺点
可以将异步操作以同步操作流程的方式表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
如何使用？：

function promiseAjax(url){
  let p = new Promise((resolve,reject)=>{
    //第一个参数成功的回调函数
    //第二个参数失败的回调函数

    let xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
      if(this.readyState===4){
        if(this.status >= 200 && this.status <300 || this.status === 304){
          let res = JSON.parse(this.responseText)
          resolve(res);//成功回调函数的传参；
        }else{
          reject(this.status)//失败回调函数的传参；
        }
      }
    }
  })
  return p
}
//然后调用
let oData = promiseAjax('http://localhost:8080/yxw/MenuController_GeneralMenuList.do');
let oData2 = promiseAjax('http://localhost:8080/yxw/DomesticProfitController_getOperatIdList.do');

Promise.all([oData,oData2]).then(function(res){
  console.log('3333',res)
},function(err){
  console.log(err)
})

8、computed属性和watch属性：
https://blog.csdn.net/joseydo…
https://www.w3cplus.com/vue/v…
computed计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。
例子：

<div v-for="subject in results">
  <input v-model="subject.marks">
  <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
</div>
<div> 学科总分Total marks are: {{ totalMarks }} </div>

results: [
    { name: 'English', marks: 70 }, 
    { name: 'Math', marks: 80 }, 
    { name: 'History', marks: 90 } 
  ]
computed: {

totalMarks: function () {
  let total = 0;
  let me = this;
  for (let i = 0; i < me.results.length; i++)
  {
    total += parseInt(me.results[i].marks);
  }
  return total;
}
},

我们可以使用Vue中的method计算出学科的总分，最终得到的总数结果是相同的我们把computed区块中的totalMarks函数整体移到methods中。
同时在模板中将{{ totalMarks }} 替换成 {{ totalMarks() }}。你最终看到的结果是一样的。

computed 属性，和在 methods 中定义一个相同的函数都可以实现这个功能，那么区别是？
computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，
才会重新取值(re-evaluate)。
这就意味着，
只要 message 没有发生变化，
多次访问 computed 属性 reversedMessage，
将会立刻返回之前计算过的结果，
而不必每次都重新执行函数。
其次，计算属性具有缓存，相比Vue中的方法而言，性能更佳。但Vue中的计算属性都是同步的，如果需要异步我们得依赖于vue-async-computed插件

标签：总结,Vue,computed,bind,Promise,marks,部分,属性
来源： https://blog.csdn.net/skf063316/article/details/104684366