Vue入门

最新推荐文章于 2022-06-20 17:42:17 发布

程十肆

最新推荐文章于 2022-06-20 17:42:17 发布

阅读量261

点赞数

分类专栏： Vue前端框架文章标签： vue

本文链接：https://blog.csdn.net/weixin_44141393/article/details/116917631

版权

Vue前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.Vue.js 基础

1-1.Vue简介

(1) 什么是vue

https://cn.vuejs.org/官网

Vue.js 是目前最火的一个前端框架
前端三大主流框架: vueJS, ReactJS,AngularJS
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
库与框架的区别

库   -- JQuery.js
  |-大量的APi 与工具 ,体现了封装的思想、需要自己调用这些API
  
框架  -- VueJS
  |-框架提供了一套完整解决方案,
  |-使用者要按照框架所规定的某种规范进行开发

(2) 为什么要学习 Vue

能够减少 JS- DOM操作
提高渲染效率
双向数据绑定 v-model 将data与view元素进行绑定
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

(3) MVC -[View] --> MVVM [前端的分层模式]

MVC - 后端
MVVM - 前端 -针对 View层

MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

1-2. Vue起步

a.下载与安装Vue

开发版本：https://vuejs.org/js/vue.js
生产版本：https://vuejs.org/js/vue.min.js

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

使用npm 前端js库与框架的下载工具  -nodeJS -- chrome V8浏览器

b.Js自定义对象的三种方式：

js字面量对象

      //字面量对象
        var stu = {
            id:1,
            name:"张三",
            study:function(){
                alert("我爱学习!");
            }
        };
        alert(stu.id+","+stu.name);  
        stu.study(); //调用对象方法

构造函数对象

 //构造函数对象
        function Student(id,name,age){
            this.id = id;
            this.name = name;
            this.age = age;
            this.study = function(){
               alert(this.name+"在study....") 
            }
        }

        //
        var stu = new Student(1,"李四",20);
        alert(stu.id+","+stu.name+","+stu.age);
        stu.study();

JSON对象 --用于网络数据的传输

//JSON对象
var stu = {"id":1,"name":"张三"};
alert(stu.id+","+stu.name)

c.入门示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 vue.js框架 -->
    <script src="js/vue-2.6.12.js"></script>
</head>

<body>
    <div id="app">
       {{msg}}
    </div>
    <script>
      //创建VM对象 String()
        //VM -viewModel 用来将数据模型接收，再调用视图渲染的对象  {} -封装一个JS对象
        var vm = new Vue({
           el: "#app",   //V-view element 缩写 -代表页面中的元素 #app查找id为app
           data:{   // M  - model  封装数据
                msg:"模拟此数据为服务端获取的json数据"
           }
        });
    </script>
</body>

</html>

d.Vue实例的选项

el  -  Element 元素
       用来表示页面中的元素，也就是View视图,专指VM用来管理的视图元素
       不要让el所管理的视图是html或者body

data  - Model 模型 数据
  格式： 自定义对象格式
  {  
      msg : "xxx",
      age:20,
      ....
     
  }
  
  还可是数组数据：
   data:{   						// M  - model  封装数据
                msg:"模拟此数据为服务端获取的json数据",
                list:[   			//(字面量对象)
                    {id:1,username:"jack",password:"123"},
                    {id:2,username:"mike",password:"123"},
                    {id:3,username:"张三",password:"123"}
                ]
           }
           
methods: 当前vm实例可以调用的方法
 methods:{  //用于定义vm实例具有的方法
               show:function(){
                    console.log(this); //方法中的this表示的是当前vm实例
               },
               study:function(){},
               add:function(){}
           }

methods使用箭头函数时的特点：此时this表示window对象
methods:{  //用于定义vm实例具有的方法
               show:function(){
                    console.log(this.msg); //方法中的this表示的是当前vm实例
               },
               study:function(x,y){
                //    console.log(x,y);
                   console.log(this.msg);
               },  //lambda表式
               study1: (x,y)=>{  // 箭头函数
                    console.log(this); //window对象  如果要获取vm可以使用this.vm
                   console.log(this.msg); //undefined
               },
               add:function(){}
           }

e.Vue术语

插值表达式 {{}} --输出vue实例的属性数据
- {{vue实例属性名}}
- 可以支持字符串拼接 - {{msg+‘xxxx’}}
- 可以支持三元运算符 - {{age>18 ? ‘成年’ : ‘未成年’}}
- 可以支持方法调用: {{msg.split(",")}}
- 不支持js声明语句，或条件分支,循环…
指令 - directive
- 指令的前缀 v- 比如： v-for,v-if,v-bind,v-on…
- v-on：指令就是给标签绑定事件可以简写为 @
```
 <input type="button" @click="show()" value="按钮" />
```

1-3.Vue基础指令

vue指令就是为取代JS DOM代码

(1).v-text和v-html

类似于: innerText和innerHTML( 会解析脚本 )

用于访问标签内部的文本

 <div id="app">
         <p>这是一个段落: {{msg}}</p>
         <p v-text="msg">这是一个段落:</p>
         <p v-html="msg">这是一个段落:</p>
    </div>

<script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
               msg:"<font color='red'>hello vue!!!</font>"
           },
           methods:{ 
           
           }
        });
</script>

(2) v-bind指令

bind绑定（单向绑定） :

该指令用于绑定vue实例的属性

v-bind指令的三种用法
- 直接使用v-bind
- 简化写法：
- 绑定时还能拼接

<div id="app">
         <!-- 使用v-bind表示此时的src将会动态读取vue实例的属性 -->
         <img v-bind:src="imagePath" /><br>
         <img :src="imagePath" /><br>
    </div>

 <script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
               msg:"<font color='red'>hello vue!!!</font>",
               imagePath:'images/angel.gif'
           },
           methods:{ 
             
           }
        });
    </script>

v-on :

绑定事件简化 @

l 作用:使用v-on指令绑定 DOM 事件，并在事件被触发时执行一些JavaScript代码

l 语法: @事件名.修饰符 = “methods中的方法名”

1-4 事件修饰符 - [了解]

@click.修饰符=“方法()”

|-prevent - 去除事件默认行为

|-once - 一次，表示事件的处理方法仅调用一次

|-冒泡.stop与捕获 .capture

|-self - 只在事件发生当前元素本身时，才会调用回调函数

<body>
    <div id="app">
       <div id="div1" @click.self="fun1()">
           <div id="div2" @click.self="fun2()">
               <button type="button" @click.once="btnHandle()">这是里层按钮</button>
           </div>
       </div>

       <a href="http://www.baidu.com" @click.prevent="aaa">这是超链接</a>
       
    </div>


    <script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
          
           },
           methods:{ 
              btnHandle(){
                  console.log("Btn按钮事件处理!");
              },
              fun2(){
                  console.log("div2事件处理...");
              },
              fun1(){
                  console.log("div1事件处理...");
              },
              aaa(){
                 alert("点击了超链接...");
              }
           }
        });
    </script>
</body>

1-5 双向绑定指令 [重要]

v-model - 模型

作用：将数据[data] 与 View 元素绑定

如果通过view元素值修改了，则data中的属性也会跟着一起改变

<body>
    <div id="app">
        <input type="text" v-model:value="msg" />
        <p>{{msg}}</p>
    </div>


    <script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
              msg:"xxx"
           },
           methods:{ 
           
           }
        });
    </script>
</body>

注：

v-model不能绑定所有的html元素，只能针对于文本框，多行文本，下拉框，单选，多选
一旦在元素使用v-model，是这些元素的value,checked,selected 都会被忽略
多行文本框 - 类似单行文本
复选框–绑定一个数组属性
单选 - 绑定单个值
下拉列表select

<div id="app">
        <input type="text" v-model="msg" value="hello" />
        <p>{{msg}}</p>
        <p>
            <textarea v-model="msg">
                这是多行文本 {{msg}}
            </textarea>
        </p>
        <p>
            <input type="checkbox" name="chk" v-model="hobby" value="music">音乐
            <input type="checkbox" name="chk" v-model="hobby" value="game">游戏
            <input type="checkbox" name="chk" v-model="hobby" value="sport">运动
            <br>
            {{hobby}}
        </p>
        <p>
            <input type="radio" name="gender" v-model="gender" value="男">男
            <input type="radio" name="gender" v-model="gender" value="女">女
            <br>
            {{gender}}
        </p>
        <p>
            <select v-model="edu">
                <option>请选择</option>
                <option>高中</option>
                <option>专科</option>
                <option>本科</option>
            </select>
            <br>
            您的学历是：{{edu}}
        </p>
    </div>


    <script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
              msg:"xxx",
              hobby:[],
              gender:"",
              edu:"高中"
           },
           methods:{ 
           
           }
        });
    </script>

1-6 Vue中的样式 [了解]

使用class指定元素的样式 – 使用:class属性可以同时指定多个选择器名称

使用数组指定class样式
指定数组中还可使用三元表达
数组中的嵌套对象
直接使用对象

 <div id="app">
        <h1 class="blue bg">这是标题一</h1>
        <!-- 当使用:class时，指定数组中元素值都将是定义的类选择器名称 -->
        <h1 :class="['blue','bg']">这是标题一</h1>
        <!--数组中三元表达式 -->
        <h1 :class="['blue','bg',flag ? 'thin' :'']">这是标题一</h1>
        <!-- 数组中的嵌套对象 -->
        <h1 :class="['blue','bg',{'italic':flag}]">这是标题一</h1>
        <!-- 直接使用对象 -->
        <h1 :class="{'blue':isBlue,'bg':isBg,'thin':isThin}">这是标题一</h1>

        <button @click="flag=!flag">改变样式</button>
    </div>

内联样式 :style

 <!-- 使用对象的方式为元素指定多个样式规则 -->
<h1 style="color:red;font-size:40px;">普通style设置</h1>
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
<!-- 可以引用data中的对象，来设置样式 -->
<h1 :style="h1Style">这是一个善良的H1</h1>

<script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
             flag:true,
             isBlue:false,
             isBg:true,
             isThin:false,
             h1Style:{
                 color: 'red', 
                 fonSize: '50px'
              }
           },
           methods:{ 
           
           }
        });
    </script>

1-7 Vue循环与条件指令

(1) v-for 与 key属性

语法: v-for=“单个对象 in data中声明的数组对象名”

对当前所处在的标签进行迭代

<div id="app">
      <ul>
          //拿下标索引：v-for="(stu,index) in list"
          <li v-for="stu in list" :key="stu.id">{{stu.id}} - {{stu.name}} - {{stu.age}}</li>
      </ul>
    </div>


    <script>
      //创建VM对象 
        var vm = new Vue({
           el: "#app", 
           data:{   
               list:[
                   {id:1,name:"jack",age:19},
                   {id:2,name:"mike",age:22},
                   {id:3,name:"tom",age:21},
                   {id:4,name:"jenny",age:20},
               ]
           },
           methods:{ 
           
           }
        });
    </script>

key属性 -指令列表中唯一标识

(2) v-if 与 v-show

 <!--v-if如果条件为真，则显示当前元素 如果为假，则从DOM中删除该元素 -->
      <p v-if="isShow">这是一个段落!</p>
       <!--v-show如果条件为真，则显示当前元素 如果为假，则设置样式(隐藏)displa:none -->
      <p v-show="isShow">这也是一个段落!</p>
      
<script>
//创建VM对象 
var vm = new Vue({
el: "#app", 
data:{   
  isShow:false
}
</script>

程十肆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

1.Vue.js 基础1-1.Vue简介(1) 什么是vuehttps://cn.vuejs.org/官网Vue.js 是目前最火的一个前端框架前端三大主流框架: vueJS, ReactJS,AngularJS前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；库与框架的区别库 -- JQuery.js |-大量的APi 与工具 ,体现了封装的思想、需要自己调用这些API 框架 -- VueJS |-框架提供了一套完整解决方案,
复制链接

扫一扫