【Vue】vue基础学习笔记

目录

• 基础
  • 差值语法
  • 模板语法
  • 数据绑定
  • el与data的两种写法
    • el与data写法1
    • el写法2：挂载
    • data写法2：函数式写法
  • 绑定样式
    • 绑定class样式
    • 绑定style样式
  • 条件渲染

基础

差值语法

  <div id="root">
        <h1>插值语法@萌狼蓝天 {{Date.now()}}</h1>
        <h1>Meng Lang Lan Tian，Can you change it? >> {{number}}</h1>
        <h2>{{message.toUpperCase()}}</h2>
        <p>
            1.创建Vue实例，传入配置对象
            <br/>
            2.容器中的Vue代码称为【Vue模板】
            <br/>
            3.容器中的代码依旧符合hmtl规范
            <hr>
            <div style="width: 100%;color:white;background-color: rgb(255, 193, 193);padding:2px 0 2px 2em;">
                注意区分表达式和代码
                </div>
        </p>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',//绑定元素 el：element 元素 | 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符。
            data:{
               number:'0',
               message:"do you know i'am big or small ?"
            }

        })//创建Vue实例
    </script>

模板语法

  <div id="app">
        <!-- 插值语法 -->
        <h1>Easy?{{is}}</h1>
        <!-- 指令语法 | 功能：解析标签（标签属性、标签体内容、绑定事件……） -->
        <a v-bind:href="url" target="_blank">点我跳转到博客</a>
        <br>
        <a :href="url" target="_blank">点我跳转到博客</a>
        <hr>
        <h1>Easy?{{school.is}}</h1>
        <a :href="school.url" target="_blank">点我跳转到博客</a>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                is:"Right",
                url:"https://cnblogs.com/mllt",
                school:{
                    is:"Wrong",
                    url:"https://mllt.cc"
                }
            }
        })
    </script>

数据绑定

<div id="app">
        单向数据绑定(v-bind)：<input type="text" v-bind:value="name"><br/>
        双向数据绑定(v-moudle)：<input type="text" v-moudel:value="blog"><br/>
        双向数据绑定(v-moudle)：<input type="text" v-moudel:value="blog">
        <!-- v-moudel只能用于表单类元素 -->
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:"#app",
            data:{
                name:"萌狼蓝天",
                blog:"htts://cnblog.com/mllt",
            }

        })
    </script>

el与data的两种写法

el与data写法1

Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',//绑定元素 el：element 元素（唯一根元素） | 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符。
            data:{
               number:'0',
               message:"do you know i'am big or small ?"
            }
        })//创建Vue实例

el写法2：挂载

        Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            data:{
               number:'0',
               message:"do you know i'am big or small ?"
            }
        })//创建Vue实例
        console.log(vm)

        //第二种写法
        vm.$mount('#root')
        //mount：挂载
  
        //setTimeout(()=>{
        //    vm.$mount('#root')
        //},3000) //3秒延迟

‍

data写法2：函数式写法

  Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
        //函数式写法
        data:function(){
            //必须要有return
            return{
               number:'0',
               message:"do you know i'am big or small ?"
            }
        }
        })//创建Vue实例
        console.log(vm)
        vm.$mount('#root')

下面是简写

        Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
        //函数式写法 组件必须用函数式
        // data:function(){
        //     console.log('@@@',this)//this:Vue的实例对象
        //     //必须要有return
        //     return{
        //        number:'0',
        //        message:"do you know i'am big or small ?"
        //     }
        // }
  
        //函数式写法 简写 
        data(){
            console.log('@@@',this)//this:Vue的实例对象
            //必须要有return
            return{
               number:'0',
               message:"do you know i'am big or small ?"
            }
        }
        //原则：由Vue管理的函数 禁止使用“=>”函数写法
        })//创建Vue实例
        console.log(vm)
        vm.$mount('#root')

绑定样式

1. class样式

   写法:class="xxx" xxx可以是字符串、对象、数组。
   字符串写法适用于:类名不确定，要动态获取。
   对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
   数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

   :style="{fontSize: xxx}" 其中xxx是动态值。
   :style="[a,b]"其中a、b是样式对象。

绑定class样式

 .basic{
            border: 1px solid red;
        }
        .round{
            border-radius:5px;
        }
        .text-center{
            text-align: center;
        }
        .text-indent{
            text-indent: 2em;
        }

 <div id="root" >
        <!-- 绑定class样式， 字符串写法 适用于 样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="newClass">
        Just play
      </div>
      <button @click='changeMood'>change</button>
      <button @click='changeMood2'>change2</button>
      <br>
      <hr>
      <br>
      <!-- 绑定class样式,数组写法,适用于 要绑定的样式个数不确定,名字也不确定 -->
      <div class="basic" :class="classArr">
        Just play
      </div>
      <br>
      <hr>
      <br>
      <!-- 绑定class样式,对象写法,适用于 要绑定的样式个数确定,名字也确定,但是要动态决定是否使用这些样式 -->
      <div class="basic" :class="classObj">
        Just play
      </div>
    </div>

 Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 newClass:'round',
                 classArr:['round','text-center','text-indent'],
                 classObj:{
                    round:true
                 }
             }
            },
            methods:{
                changeMood(){
                    this.newClass='text-center round'
                },
                changeMood2(){
                    const arr = ['round','text-indent','text-center']
                    const index = Math.floor(Math.random()*3)
                    this.newClass=arr[index]
                },

            }
        })  
        vm.$mount('#root')

绑定style样式

 .basic{
            border: 1px solid red;
        }

<div id="root" >
      <div class="basic" :style="{fontSize:fsize+'px'}">
        Just play
      </div>
      <br><br>
      <!-- 绑定style样式，对象写法 -->
      <div class="basic" :style="styleObj">
        Just play
      </div>
      <br>
      <br>
      <div class="basic" :style="[styleObj1,styleObj2]">
        Just play
      </div>
      <br>
      <br>
       <!-- 绑定style样式，数组写法 -->
      <div class="basic" :style="styleArr">
        Just play
      </div>
    </div>

 Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                fsize:40,
                styleObj:{
                    fontSize:'40px',
                },
                styleObj1:{
                    color:'green',
                    fontSize:'20px',
                },
                styleObj2:{
                    background:'yellow',
                },
                styleArr:[
                    {
                        color:'green',
                        fontSize:'20px',
                    },
                    {
                        background:'yellow',
                    }
                ]
             }
            },
            methods:{

            }
        })  
        vm.$mount('#root')

条件渲染

1. v-if

   • 写法:
     (1).v-if="表达式”
     (2).v-else-if="表达式"
     (3).v-else="表达式”
   • 适用于:切换频率较低的场景。
   • 特点:不展示的DOM元素直接被移除。
   • 注意: v-if可以和:v-else-if、v-else一起使用， 但要求结构不能被“打断”。

2. v-show

   • 写法: v-show=" 表达式"
   • 适用于:切换频率较高的场景。
   • 特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3. 备注

   使用v-if的时，元素可能无法获取到，而使用v-show 定可以获取到。

<div id="root">
        <!-- 使用v-show做条件渲染 -->
      <h2 v-show="wa">Oh Just Play1</h2>
      <h2 v-show="1===1">Oh Just Play2</h2>
      <!-- 使用v-if做条件渲染 -->
      <h2 v-if="wa">Oh Just Play4</h2>
      <h2 v-if="1===1">Oh Just Play3</h2>

      <hr>
      <h2>当前值为：{{n}}</h2>
      <button @click="n++">n++</button>
      <div v-show="n===1">v-Show 1</div>
      <div v-if="n===2">v-if 2</div>
      <div v-else-if="n===1">v-else-if 1</div>
      <div v-else>v-else</div>
      <!-- v-if 和 v-else 和 v-else-if 在使用时，要紧紧连在一起，不允许被打断，不然不形成整体 -->
      <hr>
      <!-- template只能和v-if使用，不能和v-show使用 -->
      <template v-if="n===2">
          <h2>路人甲</h2>
          <h2>路人2</h2>
          <h2>路人3</h2>
      </template>
    </div>

Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 wa:false,
                 n:0,
             }
            }
        })  
        vm.$mount('#root')