Vue基础（环境配置内部指令全局API选项内置组件）

Posted 2021-02-04 一个大西瓜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础（环境配置内部指令全局API选项内置组件）相关的知识，希望对你有一定的参考价值。

1、环境配置

安装VsCode
安装包管理工具：直接下载 NodeJS 进行安装即可，NodeJS自带 Npm 包管理工具，下载地址：https://nodejs.org/en/download/
安装完成后在命令行执行以下命令查看npm包管理器版本
```
npm -v
```
npm中文文档：https://www.npmjs.cn/

配置淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

然后执行 cnpm -v 查看版本信息

E:\\视频\\VUE>cnpm -v
cnpm@6.0.0 (C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\cnpm\\lib\\parse_argv.js)
npm@6.5.0 (C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npm\\lib\\npm.js)
node@10.15.0 (D:\\Program Files\\nodejs\\node.exe)
npminstall@3.20.1 (C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npminstall\\lib\\index.js)
prefix=C:\\Users\\Administrator\\AppData\\Roaming\\npm
win32 x64 6.1.7601
registry=https://registry.npm.taobao.org

下载vue.js(包含完整的警告和调试模式)与vue.min.js(删除了警告，30.96KB min+gzip)
安装 live-server 作为服务器
用npm进行全局安装（-g参数）
```
cnpm install -g live-server
```
然后在任何一个html页面文件路径下执行 live-server 就会打开

然后执行 cnpm init 进行初始化

E:\\视频\\VUE>cnpm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue) vue
version: (1.0.0) 1.0.0
description: Vue Demo
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\\视频\\VUE\\package.json:

{
  "name": "vue",
  "version": "1.0.0",
  "description": "Vue Demo",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

View Code

会在主文件夹下生成 package.json 文件来存储初始化信息配置
package.json：

{
  "name": "vue",
  "version": "1.0.0",
  "description": "Vue Demo",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

View Code

2、Vue内部指令

2.1、hello world

编写第一个HelloWorld代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Helloworld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: \'#app\',
            data: {
                message: "hello Vue!!!!"
            }
        })
    </script>
</body>

</html>

View Code

2.2、v-if v-else v-show 指令

v-if的使用

v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
关键代码：
```
<div v-if="isLogin">你好</div>
```
v-show的使用
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
```
<div v-show="isLogin">你好</div>
```

完整html代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if&v-else&v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好v-if</div>
        <div v-else>你好v-else</div>
        <div v-show="isLogin">你好v-show</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: \'#app\',
            data: {
                isLogin:false
            }
        })
    </script>
</body>

</html>

View Code

v-if 和v-show的区别：
- v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。

2.3、v-for指令：解决模板循环问题

模板写法

 <li v-for="item in items">
        {{item}}
</li>

js写法

var app=new Vue({
     el:\'#app\',
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

View Code

完整代码：

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

<head>
    <title>v-for</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-for 实例</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(student,index) in srotStudents">
                {{index+1}}:{{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: \'#app\',
            data: {
                items: [20, 23, 18, 7, 32, 19, 54, 56, 41],
                students: [{
                        name: "JS",
                        age: 33
                    },
                    {
                        name: "Panda",
                        age: 28
                    },
                    {
                        name: "Panpan",
                        age: 23
                    },
                    {
                        name: "King",
                        age: 14
                    },
                ]
            },
            computed: {
                sortItems: function () {
                    return this.items.sort(SortNumber);
                },
                srotStudents: function () {
                    return sortByKey(this.students,\'age\')
                }
            },
        })

        function SortNumber(a, b) {
            return a - b;
        }

        //数组对象方法排序:
        function sortByKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        }
    </script>
</body>

</html>

View Code

2.4、v-text & v-html

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的 v-text ,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>=<span v-text="message"></span><br/>

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用 v-html 标签了。

<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。完整代码：

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

<head>
    <title>v-text & v-html 实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-text & v-html 实例</h1>
    <hr>
    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
        <br>
        <span>{{dodo}}</span>
        <span v-html="dodo"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: \'#app\',
            data: {
                message: "hello Vue!",
                dodo:"<h2>hello Vue!</h2>" 
            }
        })
    </script>
</body>

</html>

View Code

2.5、v-on：绑定事件监听器

使用绑定事件监听器，编写一个加分减分的程序。

程序代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-on 实例</h1>
    <hr>
    <div id="app">
        本厂比赛得分:{{score}}
        <p>
            <button v-on:click="scoreIncrease">加分</button>
            <button @click="scoreDecrease">减分</button>
            <br />
            <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: \'#app\',
            data: {
                score: 0,
                score2: 1
            },
            methods: {
                scoreIncrease: function () {
                    this.score++;
                },
                scoreDecrease: function () {
                    if (this.score > 0) {
                        this.score--;
                    }
                },
                onEnter: function () {
                    this.score +=parseInt(this.score2);
                }
            }

        })
    </script>
</body>

</html>

View Code

我们的v-on 还有一种简单的写法，就是用@代替。

<button @click="jianfen">减分</button>

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。绑定事件写法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代码：

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

因为文本框的数字会默认转变成字符串，所以我们需要用 parseInt() 函数进行整数转换。

你也可以根据键值表来定义键盘事件：

2.6、v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

我们来看一个最简单的双向数据绑定代码
html文件：

<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

javascript代码：

var app=new Vue({
  el:\'#app\',
  data:{
       message:\'hello Vue!\'
  }
 })

修饰符
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。

文本区域加入数据绑定

<textarea cols="30" rows="10" v-model="message"></textarea>

多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for=\'isTrue\'>{{isTrue}}</label>

多选绑定一个数组

<h3>多选绑定一个数组</h3>
<p>
    <input type="checkbox" id="JS" value="JS" v-model="web_Names">
    <label for="JS">JS</label><br />
    <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
    <label for="Panda">Panda</label><br />
    <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
    <label for="PanPan">PanPan</label>
    <p>{{web_Names}}</p>
</p>

单选按钮绑定

<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>{{sex}}</p>

完整代码：

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

<head>
    <title>v-model 实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-model 实例</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model：<input type="text" v-model="message"></p>
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
        <p>v-model.number：<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多选按钮绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for=\'isTrue\'>{{isTrue}}</label>
        <hr>
        <Vue基础知识
 vue全局API
 Vue 全局API 详细介绍（nextTicksetdelete......）
 1218  组件分类,组件传参
 Vue.js学习 Item13 – 指令系统与自定义指令
 vue2.0学习-全局API

Vue基础（环境配置内部指令全局API选项内置组件）

1、环境配置

2、Vue内部指令

2.1、hello world

2.2、v-if v-else v-show 指令

2.3、v-for指令 ：解决模板循环问题

2.4、v-text & v-html

2.5、v-on：绑定事件监听器

2.6、v-model指令

2.3、v-for指令：解决模板循环问题