Vue基础入门

目录

引包

创建 

插值表达式

指令

v-if和v-show 的区别

v-if与v-for  

 v-for渲染

v-bind 与 v-model

v-bind

v-model

v-bind 与 v-model区别

侦听器watch

计算属性之computed

过滤器filters

生命周期

 nextTick的用法

 混入mixin偷懒

对象变更检测注意事项 

 向对象添加多个属性

---

引包

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

创建 

Vue data 的三种创建方式

推荐使用以下这种函数作用域形式

new Vue({
    el:'#app',//目的地
    data(){
        return{
             //保存数据的地方
                msg:"Hello Vue"  
        }
    },
    methods:{},//函数
    filters:{},//过滤器
    watch:{},  //监视器
    computed:{},//逻辑处理，具备缓存
    template:`模板内容`
});

注：data对象有多种创建方式，但是如果是在Vue组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。 

插值表达式

• { { 表达式 }}
  • 对象 (不要连续3个{ { {name:'jack'} }})
  • 字符串 { { 'xxx' }}
  • 判断后的布尔值 { { true }}
  • 三元表达式 { { true?'是正确':'错误' }}
• 可以用于页面中简单粗暴的调试
• 要用插值表达式 必须要data中声明该属性

<!-- 双大括号既可以是data中声明的变量，也可以是表达式 -->
    <h3>{
  {msg}}</h3>
    <h3>{
  { 1 + 1}}</h3>
    <h3>{
  { 1==2 ? '真的' : '假的'}}</h3>
    <!-- 如果出现复杂的表达式，使用computed代替 -->
    <div>{
  { text.split('').reverse().join('') }}</div>

指令

• v-text:元素的textContent属性,必须是双标签 跟{ { }}效果是一样的 使用较少
• v-html: 元素的innerHTML
• v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
• v-else-if
• v-else
• v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换

v-if和v-show 的区别

v-if 是条件渲染，根据初始条件判断是否进行渲染，操作的是整个元素

v-show则是不管初始条件直接渲染，修改元素的css样式

如果修改频繁，选择v-show ,反之使用v-if

v-if与v-for  

 v-for渲染

    //渲染数组datas
    <ul>
      <li v-for='(item,index) in datas' :key='item.id'>
        {
  {item}}--{
  {index}}
      </li>
    </ul>
    <ul>

    //渲染对象obj
      <template v-for='(val,key) in obj'>
        <li>
          {
  {key}}-{
  {val}}
        </li>
      </template>
    </ul>

注意：永远不要把v-if和v-for同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）