Vue学习day1.md

一、Vue介绍

Vue是什么–渐进式JavaScript 框架
框架提供了一整套东西从一个框架切换成另一个框架不容易
库 jquery 提供了一些api 从一个库切换到另一个库很方便

vue的优点

渐进式框架
轻量级
数据双向绑定
指令系统
组件化系统 --单页面应用
虚拟dom

vue缺点：兼容 ie9+

二、vue使用和下载

1、安装

生产环境项目开发结束，部署上线阶段
开发环境项目属于开发阶段(提示报错)
引入开发版本

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引入生产版本

   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

2、使用

引入Vue.js
实例化vue对象
作用域范围

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
     
      <title>Document</title>
       <!-- 1：引入vue -->
      <script src="./js/vue.js"></script>
   </head>
   <body>
      <!-- 3：创建一个作用域范围 --视图层-->
      <div id="app">

      {
   
   {msg}}

      </div>
   </body>
   <script>
   //    console.log(Vue)
   //    操作数据
   //   var app=new Vue({配置信息})

   // 2：实例化一个vue对象
   var app=new Vue({
     
     
      el:"#app",   //vue实例的作用范围标签
      data:{
     
        //数据层   作用域范围内使用到的数据都在这里定义
          msg:"vue学习"
       }
   })

   </script>
   </html>

错误集锦

   [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
   //不能把vue挂载到html或者body

   Vue is not defined
   //vue.js文件没有引入

三、插值表达式和函数

1、vue核心

数据驱动(数据改变，视图层跟着改变)
组件化开发

2、插值表达式 Mustache语法双花括号 { {}}

   语法：
   {
   
   {变量/表达式/函数名()}}
   //注意：不能写if语句和for循

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <script src="./js/vue.js"></script>
   </head>
   <body>
       
        <div  id="app">
         msg
        {
   
   {msg}}
        {
   
   {msg+'0511'}}
        <hr/>
        {
   
   {num}}
        {
   
   {num+50}}
        <hr/>
        {
   
   {flag}}
        {
   
   {flag?"vue学习":"vue"}}
        <hr/>
        {
   
   {arr}}
        <hr/>
        {
   
   {obj.name}}{
   
   {obj.age}}
       <hr/>
       {
   
   {fn()}}
        </div>
    </body>
    <script>

    var app=new Vue({
     
     
        el:"#app",    
        data:{
     
        
            msg:"vue学习",
            flag:false,
            num:25,
            arr:["aaa","bbb","ccc"],
            obj:{
     
     
                name:"张三",
                age:25
            }
        },
        methods:{
     
       //所有用到的方法都在这里定义
           fn:function(){
     
     
              alert("123") 
           },
           fn1(){
     
     
               console.log(123)
           }
        }
    })

    </script>
    </html>

3、vue实例的配置信息

el	作用域范围标签
data	定义数据
methods	定义方法

四、vue指令

1、什么是指令

以v-开头 v-xx，给标签添加的一些新属性【指令就是标签的属性】

2、使用

   <标签名 v-指令名="变量/表达式"></标签名>

3、提供了哪些指令

v-html 、v-text	用来进行数据绑定
v-bind	实现属性绑定
：class	动态样式绑定(4种方式)
style	动态绑定style的值是一个对象
v-if	节点的插入和删除
v-show	元素的显示和隐藏
v-for	用于对数组或对象进行遍历显示

1. v-html 、v-text :用来进行数据绑定

v-html和{ {}} 的区别

如果还没渲染 v-html不会显示任何内容	{ {}}会显示{ {msg}}；
v-html会解析字符串html	v-text和插值表达式不会解析

2. v-bind :实现属性绑定

   <a v-bind:href="变量/表达式">百度</a>
      简写--只加冒号
   <a :href="变量/表达式">百度</a>

代码

   <!DOCTYPE html>
   <html lang="en">
   <head>
          <meta charset="UTF-8">
          <title>常用指令</title>
          <script src="./js/vue.js"></script>
   </head>
   <body>
         
          <div  id="app">
            <p>{
   
   {msg}}</p>
            <p v-html="msg"></p>
            <hr/>
            <p>{
   
   {htmlstr}}</p>
            <p v-html="htmlstr"></p>
            <hr/>
            <p v-text="msg"></p>
            <p v-text="htmlstr"></p>
            <hr/>
            <a v-bind:href="url">百度</a>
               <img v-bind:src="imgurl"/>
               <img :src="imgurl"/>
               <p :title="'p标记'">这是一个p标记</p>
               {
   
   {'p标记'}}
             </div>
    </body>
    <script>

        var app=new Vue({
     
     
            el:"#app",   
            data:{
     
        
                msg:"vue学习",
                htmlstr:"<a href='#'>百度</a>",
                url:"http://www.baidu.com",
                imgurl:"https://upload.jianshu.io/admin_banners/web_images/4995/af694827b911ab360fe44d5252422109849c5760.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
            }
        })

   </script>
   </html>

3.：class :动态样式绑定(4种方式)

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8" />
   <title>常用指令</title>
   <script src="./js/vue.js"></script>
   <style>
      .col {
     
     
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
      }
      .bg {
     
     
        border: 2px solid red;
      }
   </style>
   </head>
   <body>
   <div id="app">
      <div class="col bg"></div>
      <!-- 1:直接写一个变量赋值 -->
      <div :class="classN"></div>
      <!-- 2：class添加一个动态对象  用true或者false去控制 -->
      <div :class="classobj"></div>

      <div :class="{
     
     'col':false}"></div>
      <div :class="{
     
     'col':msg=='学习'}">123</div>

      <!-- 3：class添加[] 用三元运算符去控制 -->
      <div :class="[1==1?'col':'col bg']">456</div>

      <!-- 4:字符串拼接 -->

      <div :class="'col '+classN">789</div>
   </div>
   </body>
   <script>
    var app = new Vue({
     
     
      el: "#app",
      data: {
     
     
        classN: "bg",
        classobj: {
     
     
          col: true,
          bg: true,
        },
        msg: "学习",
        htmlstr: "<a href='#'>百度</a>",
        url: "http://www.baidu.com",
        imgurl:
          "https://upload.jianshu.io/admin_banners/web_images/4995/af694827b911ab360fe44d5252422109849c5760.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      },
    });
   </script>
   </html>

4. style：动态绑定style的值是一个对象

如果属性名有"-" 需要加引号，若不想加引号要改成驼峰命名法比如 font-size 改写成fontSize

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./js/vue.js"></script>
   </head>
   <body>
     <div  id="app">
     <div style="width:100px;height:100px;background-color:red"></div>
     <div :style="{
       
       width:'100px',height:'100px','background-color':'pink'}"></div>
     <div :style="{
       
       width:size,height:'100px',backgroundColor:'pink'}">    </div>
     <div :style="styleobj"></div>
     <div :style="[stylea,styleb]">hello</div>
               {
   
   {msg}}
     </div>
    </body>
    <script>
        var app=new Vue({
     
     
            el:"#app",   
            data:{
     
        
                size:"100px",
                msg:"123",
                styleobj:{
     
     
                    width:'100px',
                    height:'100px',
                    'background-color':'pink'
                },
                stylea:{
     
     
                    border:"5px solid red",
                    fontSize:'330px'
                },
                styleb:{
     
     
                    color:'blue'
                }
            }
        })
    </script>
    </html>

5. v-if:节点的插入和删除

注意：v-if和v-else-if还有v-else的标签要紧邻，否则报错

   <标签 v-if="变量/表达式">内容</标签>
         //值为true插入节点，值为false删除节点、

   <标签 v-if="变量/表达式">内容</标签>
   <标签 v-else>内容</标签>

   <div v-if="变量/表达式">登录  注册</div>
   <div v-else-if="变量/表达式">xxx欢迎你</div>
   <div v-else-if="变量/表达式">xxx欢迎你</div>
   <div v-else>xxx欢迎你</div>

6. v-show:元素的显示和隐藏

作用：元素的显示和隐藏(通过样式display控制显示隐藏)
什么时候使用v-if 什么时候使用v-show
- 频繁的切换元素使用v-show，只有一两次切换元素使用v-if

   <标签 v-show="变量/表达式">内容</标签>

v-if和v-show的区别

v-if	v-show
true就插入节点，false删除节点[没有对应的html内容]	true就显示，false隐藏[css的display属性控制显示隐藏]

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./js/vue.js"></script>
   </head>
   <body>
      <div  id="app">
      <div v-if="flag">登录  注册</div>
      <div v-if="!flag">xxx欢迎你</div>
      <div v-if="flag">登录  注册</div>
      <div v-else>xxx欢迎你</div>
      <div v-if="score>=90&&score<=100">
         <p>优秀</p>
      </div>
      <div v-else-if="score<90&&score>70">良好</div>
      <div v-else>合格</div>
<!--注意： v-if v-else-if  v-else 所对应的标签必须紧邻，否则会报错 -->

       <div>
          <span v-show="msg=='国际'">国际</span>
          <span v-show="msg=='国内'">国内</span>
       </div>
       </div>
   </body>
   <script>
          var app=new Vue({
     
     
            el:"#app",   
            data:{
     
        
                flag:true,
                score:89,
                msg:"国际"
            }
        })
   </script>
   </html>

7. v-for:用于对数组或对象进行遍历显示

   <标签 v-for="值 in 数组/对象"></标签>
   <标签 v-for="(值,键) in 数组/对象"></标签>

多层嵌套
- 注意:内层的键值对的标识符不能和外层的冲突

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="./js/vue.js"></script>
   </head>
   <body>
      <div  id="app">
         <ul>
            <li v-for="(item,index) in arr">
                {
   
   {index+1}}----{
   
   {item}}
            </li>
         </ul>
         <hr/>
         <ul>
            <li v-for="(val,key) in obj">
                {
   
   {key}}---  {
   
   {val}}
            </li>
            </ul>
            <hr/>
          <ul>
             <li v-for="item in userarr">
                 {
   
   {item.name}}-{
   
   {item.age}}-{
   
   {item.sex}}
                    
             <ol>
                <li v-for="val in item.scorearr">
                   {
   
   {val.scorename}}-{
   
   {val.scorenum}}
                </li>
             </ol>
             </li>
          </ul>
          </div>
   </body>
   <script>
       var app=new Vue({
     
     
          el:"#app",   
          data:{
     
        
             arr:["aaa","bbb","ccc","ddd"],
             obj:{
     
     
                 name:"小小",
                 age:21,
                 sex:"男"
             },
             userarr:[
                 {
     
     name:"张三",age:24,sex:"男",
                 scorearr:[
                     {
     
     scorename:"china",scorenum:96},
                     {
     
     scorename:"english",scorenum:12},
                     {
     
     scorename:"math",scorenum:120}
                 ]
              },
                 {
     
     name:"李四",age:23,sex:"男",
                 scorearr:[
                     {
     
     scorename:"china",scorenum:96},
                     {
     
     scorename:"english",scorenum:12},
                     {
     
     scorename:"math",scorenum:120}
                 ]},
                 {
     
     name:"狗蛋",age:25,sex:"男",
                 scorearr:[
                     {
     
     scorename:"china",scorenum:96},
                     {
     
     scorename:"english",scorenum:12},
                     {
     
     scorename:"math",scorenum:120}
                 ]},
                 {
     
     name:"翠花",age:21,sex:"女",
                 scorearr:[
                     {
     
     scorename:"china",scorenum:96},
                     {
     
     scorename:"english",scorenum:12},
                     {
     
     scorename:"math",scorenum:120}
                 ]}
             ]
          }
      })
   </script>
   </html>

4、v-for的key值

v-for官网讲解

就地复用“问题加key值， key唯一标识。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./js/vue.js"></script>
   </head>
   <body>
      <div  id="app">
      <div v-if="flag">
          姓名: <input type="text" key="a1" />
      </div>
      <div v-else>
          年龄: <input type="text" key="a2" />
      </div>
      <ul>
         <li v-for="(item,index) in arr" :key="item.id">
         <input type="checkbox" /> {
   
   {item.name}} {
   
   {index}}
         </li>
      </ul>
      </div>
   </body>
   <script>
      var app=new Vue({
     
     
          el:"#app",   
          data:{
     
        
              flag:true,
              arr:[
                  {
     
     id:1,name:"香蕉"},
                  {
     
     id:2,name:"苹果"},
                  {
     
     id:3,name:"西瓜"},
                  {
     
     id:4,name:"梨"}
              ]
          }
      })

   </script>
   </html>

一、Vue介绍

vue的优点

二、vue使用和下载

1、安装

2、使用

三、插值表达式和函数

1、vue核心

2、插值表达式 Mustache语法 双花括号 { {}}

3、vue实例的配置信息

四、vue指令

1、什么是指令

2、使用

3、提供了哪些指令

1. v-html 、v-text :用来进行数据绑定

2. v-bind :实现属性绑定

3.：class :动态样式绑定(4种方式)

4. style：动态绑定style的值是一个对象

5. v-if:节点的插入和删除

6. v-show:元素的显示和隐藏

7. v-for:用于对数组或对象进行遍历显示

4、v-for的key值

猜你喜欢

2、插值表达式 Mustache语法双花括号 { {}}