vue基础语法注意点整理-后续更新

布满荆棘的人生 2023-03-01 09:22 120阅读 0赞

//Vue中定义的变量必须在data对象中；  
    //v-bind:title="message"是鼠标悬浮显示；    new Date().toLocaleString()获取系统当前时间  
    //v-if 绑定的值为true或者是false，仅仅是boolean值，不能加引号；只有为true的时候，标签内的内容才能显示  
    //app4.todos.push(\{ text: '新项目' \}) 数组内加新的对象用push  
    //split() 方法用于把一个字符串分割成字符串数组;join() 方法用于把数组中的所有元素放入一个字符串;  
    //v-model双向绑定 input中直接显示值  
    //Vue.component('todo-item',\{template:'<li>Vue注册全局组件</li>'\})  
    //父到子组件传值：子组件定义props:\['todo'\]，在模板标签中定义:todo="dataSource"，这样子组件就能使用todo获取到dataSource中的值了  
    //Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统;这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。  
    //只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。  
    //Object.freeze(obj)，这里的obj是data:obj在外边定义的对象，使用该函数响应式系统将无法追踪其变化  
    //vm.$el === document.getElementById('example') // => true  
    //vm.$data === data // => true  
    //vm.$watch('a', function (newValue, oldValue) \{ // 这个回调将在 \`vm.a\` 改变后调用,a是data中的属性\})  
    //初始化过程:数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM (运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会)  
    //生命周期钩子的 this 上下文指向调用它的 Vue 实例  
    //因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致  Cannot read property of undefined his.myMethod is not a function  
    //计算属性是基于它们的响应式依赖进行缓存;如果你不希望有缓存，请用方法来替代。  
    //计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：  
    //v-bind:class 指令也可以与普通的 class attribute共存  
    //v-bind:style="styleObject"data: \{ styleObject: \{color: 'red',fontSize: '13px'\}\}  
    //v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。  
    //v-show 不支持 <template> 元素，也不支持 v-else。  
    //v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display  
    //v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建  
    //v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。  
    //v-for="(item, index) in items"  \{ \{ index \}\} - \{ \{ item.message \}\} index从0开始  
    //<div v-for="item of items"></div>  of也行====in  
    //<div v-for="(value,name，value) in object">取到object对象的key和value值  
    //Vue 将被侦听的数组的变更方法进行了包裹push()pop()shift()unshift()splice()sort()reverse()  
    //filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。  
    //创建一个计算属性，来返回过滤或排序后的数组。  
    /\*     computed: \{  把奇数过滤掉只剩下偶数  
      evenNumbers: function () \{  
        return this.numbers.filter(function (number) \{  
          return number % 2 === 0  
        \})  
      \}  
    \} \*/  
    //this.todos.push(\{id: this.nextTodoId++,title: this.newTodoText\})  
    //<li is="todo-item" ================ 模板<todo-item/>  
    //alert(event.target.tagName)  点击按钮；输入该事件的标签名称 tagName  
    //但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。  
    //<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label>  id =====for  
    //如果selected的option没有绑定v-bind:value="option.value"的话，那么select选择什么，后边的数组就显示什么，而不是显示option.value的值；  
    //<select v-model="selected" multiple style="width: 50px;">  下拉框用鼠标选中的多选框  
    //<input v-model.lazy="msg">     
    //<input v-model.number="age" type="number"> 自动将用户的输入值转为数值类型 如果这个值无法被 parseFloat() 解析，则会返回原始的值。  
    //<input v-model.trim="msg">  自动过滤用户输入的首尾空白字符  
    //      <a :\[key\]="url"> ... </a>  
    //           <a @\[event\]="doSomething"> ... </a>  
    //不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。  
    //假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。  
    //Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。  
    //