vue简单入门

最新推荐文章于 2022-11-15 11:58:07 发布

mergerly

最新推荐文章于 2022-11-15 11:58:07 发布

阅读量215

点赞数

分类专栏： WEB技术

原文链接：https://segmentfault.com/a/1190000019465056?utm_source=tag-newest

版权

WEB技术专栏收录该内容

42 篇文章 0 订阅

订阅专栏

vue - 国人开发制作的
类似于 view 的发音
vue经过了几次大的版本波动

0.x 0.6版本
1.x 版本
2.x 版本 - 现在常用的

为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦

react 因为版权原因，导致百度等企业转用vue，导致vue突然火起来，也有支持国人的成分，当然其中的也缺不了它的确好用。

完整版演示代码

正式部分

vue学习建议先学会js，json

有的人觉得vue或angular不够jquery方便，首先，vue和angular是数据驱动的，而jquery是事件驱动的，也就是说用jquery需要想着给赋予事件，而vue与angular只要想着数据怎么变化就行了。

vue2.x下载安装

1、安装node.js，安装完node.js之后，npm也会自动安装，查看版本确认是否安装成功

node -v

npm -v

2、全局安装脚手架工具vue-cli，命令如下：

npm install --global vue-cli

3、vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpack

vue init webpack myvue

一路回车

注：安装过程中有个选项（Use ESLint to line your code 如果不想严格检查语法可以选择 No ）

4、进入到myvue目录下，使用npm install 安装package.json包中的依赖

命令如下：

cd myvue

npm install

5、运行项目：

npm run dev

用浏览器打开 http://localhost:8080

vue使用

html部分：
    //首先当然是引入vue.js文件
    <script src="vue.js"></script>
    <body>
    //vue标准是要用两对花括号圈住数据名的
    {{msg}}
    <body>

js部分：
    //使用vue要先new 一个vue对象出来传入json格式的数据
    <script>
        new Vue({
            //作用域：el - element缩写
            el:'body',
            //输出的数据
            data:{
                msg:'hello vue!',
            }
        })
    </script>

{{}} -> 必须在作用域里面放入输出的模板，模板里面放入data里面你自己定义的变量

注意：只有ie8 以上的浏览器才能兼容vue

如何选取class或id为作用域

    <div class="myDiv">
        {{msg}}
    </div>

    <script>
        new Vue({
    //这里选区类与id是与jquery的方式是一样的，id的话就是#myDiv
            el: '.myDiv',
            data: {
                msg:'hello vue!',
            }
        })
    </script>

常用指令

类似于angular 的常用指令有 ng-show /ng-repeat，vue当然也有。

v-show：类似于display，`true`就是显示`false`就是隐藏

    <style>
      div{
          width: 200px;
          height: 200px;
          background: black;
      }
    </style>

    <div v-show='false'></div>

    <script>
      //这里定义作用域是必须的，使用vue语句如果不定义作用域是不会起作用的
      new Vue({
          el:'body',
      })
    </script>


    <style>
          div{
              width: 200px;
              height: 200px;
              background: black;
          }
      </style>


    <div v-show='dis'></div>

    <script>
      new Vue({
          el:'body',
          //也可以利用数据传输来使用，更加灵活
          data:{
              dis:false,
          }
      })
    </script>

v-for：循环输出数组或json数据

    <div v-for='i in arr'>{{i}}{{$index}}</div>
    <div v-for='i in json'>{{i}}</div>
    <div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
    <div v-for='i in json'>{{$key}}=>{{i}}</div>
    <script>
        new Vue({
            el:'body',
            data:{
                //这是个字符串数组
                arr:['a','b','c'],
                json:{
                    bill:18,
                    bill2:21,
                    bill3:24
                }
            }
        })
    </script>

v-for: {{ $KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} -> 索引值，{{$ key}} -> key值
- 因为json是键值对，可以理解为数组的索引与值的关系，所以可以用不同方式访问。
- {{ $KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲}可以进行计算 => {{$ index+10}} 从10开始计数

v-model：双向绑定 – 数据和输出绑定

<body>
    <input type="text" v-model='msg'>
        
    {{msg}}
    <script>
        new Vue({
            el:'body',
            data:{
                msg:'',
            }
        })    
    </script>

Vue事件书写区

    <style>
        div{
            height: 100px;
            width: 100px;
            background:black;
        }
    </style>    
    <input type="button" v-on:click='change' value="change">
    <div v-show='dis'></div>

    <script>
        new Vue({
            el:'body',
            data:{
                dis:true,
            },
            //vue 事件区域，所有事件控制写在这里
            methods:{
                change:function() {
                    this.dis=!this.dis;
                }
            }
        })    
    </script>

- v-on有简写形式@ ,可以直接把v-on替换为@，@click='change'。

事件对象：event

查看事件对象
- 这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面

html部分：
    //这里是必须设置这个样式，不然body的大小是根据页面内容调整大小的
    <style>
        body,html{
            height: 100%;
            width: 100%;
        }
    </style>
    <body @click='show'>
    
    <script>
            new Vue({
                el:'body',
                methods:{
     //事件对象，如果传参只有一个，默认就是事件对象，如果有多个参数传入，那么事件对象就是$event
                    show:function(e){
                        console.log(e);
                    }
                }
            })
    </script>

`@click="show"是可以传递参数给事件的，当它传递参数时，事件处理的形参不再默认为是时间对象，当我们传递参数给事件又想看事件对象时可以用$event

html部分：
    <style>
        body,html{
        height: 100%;
        width: 100%;
    }
    </style>
    <body @click='show(10,event)'>
    
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                show:function(e,$event){
                    console.log(e,event);
                }
            }
        })
    </script>

事件冒泡：事件冒泡的三种阻止方法

先来看下事件冒泡没有阻止的情况
- 这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
            div{
                height: 100px;
                width: 100px;
                background: black;
            }
    </style>
    
    <body @click="myBody">
        
    <div @click="myDiv"></div>
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

event.cancelBubble=true;

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
            div{
                height: 100px;
                width: 100px;
                background: black;
            }
    </style>
    
    <body @click="myBody">
        
    <div @click="myDiv"></div>
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    event.cancelBubble=true;
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

event.stopProgation();

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
            div{
                height: 100px;
                width: 100px;
                background: black;
            }
    </style>
    
    <body @click="myBody">
        
    <div @click="myDiv"></div>
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    event.stopProgation();
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

直接在click后接.stop
- 其中，上面两个event都是原生方法，所以虽然能用，但是还是不够方便，所以这里使用vue方法来

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
            div{
                height: 100px;
                width: 100px;
                background: black;
            }
    </style>
    
    <body @click="myBody">
        
    <div @click.stop="myDiv"></div>
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

阻止默认事件 -- 两种默认事件阻止方式

event.preventDefault();
- 这个是原生js方法，能用但是也不够vue方法方便

html部分：
        <style>
                body,html{
                    height: 100%;
                    width: 100%;
                }
            </style>
    
    <body @click="myBody">
                
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    event.preventDefault();
                    alert('我右键了');
                }
            }
        })
    </script>

@click.prevent="";

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>
    
    <body @click.prevent="myBody">
                
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    alert('我右键了');
                }
            }
        })
    </script>

键盘事件 -- 键盘监控事件利用`keydown/up`来监控用户按下了什么按键

键盘监控事件

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>
    
    <body @keydown="mybody">
        
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按键盘了');
                }
            }
        })    
    </script>

event.keyCode监控用户按键的ASCII码，可以通过查看keyCode来赋予不同按键不同事件，例如通过console.log(event.keyCode);可以看到按键A的键值是65，那么我们可以设置只有当按下A键时才显示的事件
- @keydown.65等效于if(e.keyCode==65)

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>
    
    <body @keydown.65="mybody">
        
js部分：
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了A键');
                }
            }
        })    
    </script>

可以组合键使用

html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>
    
    <body @keydown.65.66.67="mybody">
        
js部分：
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了abc键');
                }
            }
        })    
    </script>

转自：https://segmentfault.com/a/1190000019465056?utm_source=tag-newest

mergerly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单入门

vue - 国人开发制作的类似于 view 的发音vue经过了几次大的版本波动0.x 0.6版本1.x 版本2.x 版本 - 现在常用的为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦react 因为版权原因，导致百度等企业转用vue，导致vue突然火起来，也有支持国人的成分，当然其中的也缺不了它的确好用。完整版演示代码正式部分vue学习建议先学会js...
复制链接

扫一扫