vue入门

1.ES6语法

1.1 let与const

  • let是声明块级变量，作用域某个代码块中，离开代码块失效！
    <script type="text/javascript">
        for(let i=0;i<5;i++){
        }
        console.debug(i);
    </script>

报错：i is not defined

  • const是声明一个常量，一旦赋值就不能更改！

1.2 解构表达式

  • 解构数组
        let array = [1,2,3];
        let [a,b,c] = array;
        console.debug(a,b,c)

将数组中的值取出来赋给a、b、c

  • 解构对象
        const person = {
            name:"迪迦",
            age:100
        }
        let{name,age} = person;
        console.debug(name+"---"+age)
        //把对象作为参数传递
        function say({name,age}) {
            console.debug("---"+name+"---"+age)
        }
        say(person)

解构对象要使用{ }

1.3 箭头函数

    <script type="text/javascript">
        //传统声明函数-1
        let sayHello = function(){
            console.debug("hello")
        }
        //es6声明函数
        function sayHi(){
            console.debug("hi")
        }
        //箭头函数
        let sayGoodbay = () =>{
            console.debug("goodbay")
        }
        sayHello();
        sayHi();
        sayGoodbay();
    </script>

​ var 函数名 = (参数列表) => {函数内容}

​ 等价于

​ var 函数名 = function(参数列表){

​ 函数内容

​ }

如果参数只有一个可以省略(),函数内容只有一句代码可以省略{} , 没有参数不能省略（）要占位！
箭头函数this是属于当前创建环境this是一致的
如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window!
所以如果要在箭头函数中使用this则要小心！

        let sayLove = name => console.debug("love"+name);
        sayLove("云");

1.4 Promise对象

    <script type="text/javascript">
        const p = new Promise((resolve, reject) =>{
            // 这里我们用定时任务模拟异步
            const num = Math.random();
            // 随机返回成功或失败
            if (num < 0.5) {
                resolve("成功AAA！num:" + num)
            } else {
                reject("出错了BBB！num:" + num)
            }
        })//以后上面这坨代码我们都看不到的

        //以后我们的请求，有点类似于下面这种结构
        // 调用promise
        p.then(function (msg) {//如果调用成功执行该function函数中的内容
            console.log(msg);
        }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
            console.log(msg);
        })
        /**
         * 伪代码以后发送ajax的写法：
         * this.axios.get(url,param).then(res=>{
         *
         * }).catch(res=>{
         *
         * })
         */

    </script>

2. vue的导入

Node.js：他是可以用JavaScript 开发服务器代码！

npm是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架！相当于后台中maven！

使用npm的方式引入vue.js

  1. 安装node.js，其内置了npm
  2. idea中安装node.js插件
  3. 使用npm下载vue.js

Npm常用命令：

  • 创建前端项目 初始化：npm init -y(跳过) -----相当于建了一个maven工程
  • 安装模块：
    全局安装(所有项目都能用)
    npm install -g vue
    npm -g root 安装路径
    局部安装(当前项目使用)
    npm install/i vue
  • 查看模块：
    查看某个模块：npm list vue
  • 列表模块：npm ls
    卸载模块：npm uninstall vue
    更新模块：npm update vue
    运行工程：npm run dev/test/online
    编译工程：npm run build

3.vue的使用

3.1 vue是什么？

它是一个基于双向绑定的前端框架，双向绑定就是如果数据变化，界面也会变化，界面变化，数据也会随之变化！

MV VM模式

M：model 准备数据

V：view 渲染试图

VC：viewModel 视图模型

3.2 简单使用

导入vue的核心库之后，使用其内置对象vue

<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:"#mydiv",
        data:{
            name:"Feng",
            age:"13",
        }
        }
    })
</script>

    <div id="myDiv">
        {{name}}
        <h1>{{age}}</h1>
    </div>

  • el：主要用来指示挂载的dom！只要是在该挂载的dom下都可以取到值！

    • id选择器
    el:"#myDiv",
    • 类型选择器
    el:".cdiv",
    • 标签选择器
    el:"span",

不能同时挂载多个节点，且每个选择器只能挂载一个dom，如果挂载了多个，只会有一个取到值！建议使用id选择器来确保唯一性！

如果要在dom外取值：vue.name

  • data：用于准备数据
var vue = new Vue({
        el:"#myDiv",
       data:{
            msg:"测试",
            show(){
                console.debug("this is show method");
            },
            person:{
               name:"feng",
               sex: "23",
            }
        }
    })

    <div id="myDiv">
        {{msg}}
        <h1>{{show()}}</h1>
        <p>{{person.name}}</p>
    </div>
  • methods：当前vue实例中所有的方法都放在其中！不应该放在data中，即使也可以！
<script>
   var vue = new Vue({
        el:"#myDiv",
       data:{
            msg:"测试",
            person:{
               name:"feng",
               sex: "23",
            }
        },
       methods:{
           show(name){
               return "hello"+name;
           },
       }
    })
    vue.name
    vue.show();
</script>

    <div id="myDiv">
        {{msg}}
        <h1>{{show("小明")}}</h1>
        <p>{{person.name}}</p>
    </div>
  • vue表达式
<script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
           num1: 10,
           num2: 20,
           sex:true
       }
   })
</script>

    <div id="myDiv">
        {{num1}} + {{num2}} = {{num1+num2}}
        {{num1}} - {{num2}} = {{num1-num2}}
        {{num1}} * {{num2}} = {{num1*num2}}
        {{num1}} / {{num2}} = {{num1/num2}}
        {{num1}} % {{num2}} = {{num1%num2}}
        {{sex?'男':'女'}}
    </div>
  • 操作字符串

胡须表达式可以调用对等类型的方法！

<script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
           str:"HowAreYou"
       }
   })
</script>

    <div id="myDiv">
        {{str}}
        {{str.substring(2,4)}}
        {{str.substr(4,2)}}
    </div>

substring截取字符串，左闭右开！

substr（a，b）从a开始（包括a）处截取，共截取b位！

3.3 vue指令

  1. v-text=“表达式” 设置标签中的文本

在指定的标签设置值，如果设置的代码有html，则会以纯文本的方式展示！

v-html=“表达式” 设置标签中的html

在指定的标签设置值，如果设置的代码有html，则会被浏览器所解析！

<script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
           text:"HowAreYou",
           html:"<h1>I'mFine</h1>"
       }
   })
</script>

 <div id="myDiv">
        <div v-text="text"></div>
        <span v-html="html"></span>
    </div>
  1. v-for=“表达式” 循环

语法:
<标签 v-for="元素 in 数据源"></标签>

 数据源:   数组,
   元素:   数组中的一个元素,

 数据源:   对象
   元素:   对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键

<标签 v-for="(元素,键,索引) in 对象"></标签>

作用:
基于数据源多次循环达到多次渲染当前元素.

在vue中可以循环迭代的元素：数组、字符串、对象、整数

<script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
           number:10,
           str:"abcdefg",
           array:["a",1,"(๑•̀ㅂ•́)و✧"],
           obj:{
               name:"朴经理",
               age:"23",
               sex:true,
           }
       }
   })
</script>

    <div id="myDiv">
        <ul>
            <li v-for="(n,i) in number">{{n}}--索引--{{i}}</li>
        </ul>
        <ul>
            <li v-for="(s,i) in str">{{s}}--索引--{{i}}</li>
        </ul>
        <ul>
            <li v-for="(a,i) in array">{{a}}--索引--{{i}}</li>
        </ul>
        <ul>
            <li v-for="(k,o,i) in obj">属性{{o}}--值{{k}}--索引--{{i}}</li>
        </ul>
    </div>

只有对象有三个参数，属性和值和索引！

  1. v-bind指令

    <script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
          //src:"imgs/1.jpeg"
           options:{
               src:"imgs/1.jpeg",
               width:50,
               height:50,
           }
       }
   })
</script>

将data中的数据绑定到标签上,作为标签的属性！

为一个标签属性绑定一个值:

<标签 v-bind:标签属性名字="表达式"></标签>

 <div id="myDiv">
        <img v-bind:src="src"/>
    </div>

简写形式:

<标签 :标签属性名字="表达式"></标签>

 <div id="myDiv">
        <img :src="src"/>
    </div>

为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

 <div id="myDiv">
        <img v-bind="options"/>
    </div>

  1. v-model

    在表单控件上创建双向绑定,

    表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据

    当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定!

    <标签 v-model="表达式"></标签>

    如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
    绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
    v-model只作用于以下表单:
    input select textarea

  • input标签

    <div id="myDiv">
    <input type="text" v-model="text"/>{{text}}
    <hr>
    <input type="radio" v-model="radio" value="0">男
    <input type="radio" v-model="radio" value="1">女
    {{radio}}
    <hr>
        <input type="checkbox" v-model="checkbox" value="sing">唱歌
        <input type="checkbox" v-model="checkbox" value="dance">跳舞
        <input type="checkbox" v-model="checkbox" value="read">看书
        {{checkbox}}
    </div>

    <script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
           text:"helloWorld",
           radio:0,
           checkbox:["sing","read"],
       }
   })
</script>

  • select标签

          <select v-model="select">
            <option  value="0">--请选择--</option>
            <option  value="gd">广东</option>
            <option  value="xz">西藏</option>
            <option  value="xj">新疆</option>
        </select>

  • textarea标签

    <textarea v-model="textarea"></textarea>

  1. v-if

    <标签名 v-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else></标签名>

    根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

     <div id="app">
        <span style="color: red;" v-if="age>60&&age<=100">老年了</span>
        <span style="color: goldenrod;" v-else-if="age>30&&age<=60">中年</span>
        <span style="color: green;" v-else-if="age>18&&age<=30">青少年了</span>
        <span style="color: yellow;" v-else-if="age>=0&&age<=18">儿童</span>
        <span style="color: yellow;" v-else>非正常年龄</span>
    </div>

  1. v-on

    绑定事件：

    可以写表达式或触发函数！

        <div id="myDiv">
        <button style="width: 50px;height: 20px" value="点我" v-on:click="num++">              </button>
        {{num}}
    </div>
<!--简写方式-->
<button style="width: 50px;height: 20px" value="点我" @click="num++"></button>

    触发函数：只有方法名，没有“（）”

    <button style="width: 50px;height: 20px" @mouseover="over" @mouseout="out"></button>

    <script>
   var vue = new Vue({
       el: "#myDiv",
       data: {
          num:1,
       },
       methods:{
           over:()=>console.debug("in"),
           out:()=>console.debug("out")
       }
   })
</script>

  2. v-show: 控制标签属性,显示还是隐藏

    <标签名 v-show="表达式"></标签名>

    根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效 ！

    当v-show的值为假时, 会在标签的css中添加 display: none

        <div id="myDiv">
       <span style="color: red" v-show="isShow">≧◠◡◠≦✌</span>
        <button style="width: 50px;height: 20px" @click="show"></button>
    </div>

     methods:{
           show(){
               console.debug(this.isShow)
               this.isShow=!this.isShow
           }
       }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351