vue.js的安装与常用指令

ccq0133

已于 2024-01-04 21:39:24 修改

阅读量1.6k

点赞数 34

文章标签： vue.js 前端 javascript

于 2024-01-04 21:16:21 首次发布

本文链接：https://blog.csdn.net/ccq0133/article/details/135392444

版权

1.什么是Vue

2.vue的安装

1.Node.js安装

2.执行npm install --vue-cli ，全局安装vue-cli

3.安装后，检查是否安装成功

4.使用vue建一个项目名叫“my-project”，注意项目名不能有大写。

1.什么是Vue

Vue.js（通常简称为 Vue）是一种流行的 JavaScript 前端框架，用于构建用户界面。它采用了组件化的开发方式，通过将用户界面拆分为独立的可复用组件，使开发者能够更轻松地构建大型、复杂的应用程序。

Vue.js 的核心思想是响应式数据绑定和组件化。它通过使用双向数据绑定机制，将数据与 DOM 元素进行关联，当数据变化时，页面会自动更新。同时，Vue.js 也提供了丰富的指令系统，用于操作 DOM 元素、控制显示和隐藏、处理用户输入等。

Vue.js 具有以下特点：

简洁易学：Vue.js 的 API 简单明了，学习曲线较为平缓，可以快速上手。
渐进式框架：Vue.js 是一个渐进式框架，可以根据项目需要选择性地引入其不同模块，以逐步增加功能和复杂度。
组件化开发：Vue.js 鼓励使用组件化开发，可以将页面拆分为独立组件，每个组件具有自己的逻辑和样式，便于复用和维护。
虚拟 DOM：Vue.js 通过使用虚拟 DOM 技术，将页面的状态保存在内存中，然后通过比较虚拟 DOM 的差异来更新实际的 DOM，提高了页面的渲染性能。
生态系统丰富：Vue.js 拥有庞大而活跃的社区，在其生态系统中有许多第三方插件、工具和支持库，可以帮助开发者更高效地构建应用程序。

总而言之，Vue.js 是一个简单灵活且功能强大的前端框架，适用于构建各种类型的 Web 应用程序。无论是小型项目还是大型企业级应用，Vue.js 都可以提供便捷的开发体验和卓越的性能。

2.vue的安装

1.Node.js安装

官网下载地址： Download | Node.js

2.执行npm install --vue-cli ，全局安装vue-cli

因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。

产生通过config命令设置默认下载路径：

npm config set registry https://registry.npm.taobao.org

然后再执行：

npm install vue-cli

安装界面：

3.安装后，检查是否安装成功

首先win+r打开控制面板，输入cmd

接着输入下面代码

vue -V

有版本号就是安装成功了

4.使用vue建一个项目名叫“my-project”，注意项目名不能有大写。

vue create my-project

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

这里我们也可以吧Router选上，因为后续开发过程中路由插件的使用会更多。

3.vue指令的运用

1.v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

v-text指令用于设置标签的文本内容(textContent)
v-text会替换全部的内容，使用插值表达式{{}}可以替换指定内容，一般使用插值表达式较为方便！

代码如下：

	<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
 
</script>

效果如下：

2.v-html指令

v-html指令的作用是设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

代码如下：

<!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>
</head>
<body>
    <div id="app">
        <!-- v-html设置标签的文本，与v-text效果一致 -->
        <!-- v-text设置标签的文本属性 -->
        <p>1.v-text和v-html设置标签文本内容</p>
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2><br>
		
		<!-- v-html可以解析html结构，v-text不能解析html结构 -->
        <p>2.v-text和v-html解析html结构</p>
        <h2 v-text="info"></h2>
        <h2 v-html="info"></h2><br>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               message:"深圳",
               info:"<a href='http://www.baidu.com'>百度一下</a>"
           }
       })
    </script>
</body>
</html>

效果如下：

3.v-on指令

v-on指令的作用是为元素绑定事件
事件名不需要写on
v-on 指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问data中的数据

用法：

<input type="button" value="v-on指令" v-on:事件名="方法名">
<input type="button" value="v-on指令" @事件名="方法名">

代码如下：

ps:v-bind有时候也经常用于绑定动态样式,具体的语法如下：

绑定单个动态类名时：

绑定多个动态类名时：

同时绑定静态+动态类名时：

在v-bind指令中使用逻辑判断时：

4. v-bind

v-bind指令的作用是为元素绑定属性
v-bind的完整用法是v-bind:属性名
v-bind的简写方式可以直接省略v-bind，只保留**:属性名**
需要动态的增删class可以使用三元表达式，也可以使用对象的方式，但是建议使用对象的方式，在以下代码中有所实现

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<input type="text" v-bind:value="username">

因为 v-bind 非常常用，提供了特定的简写语法：

<input type="text" :value="username">

小结：

Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。

5. v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

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

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

结果如下：

效果如下：

v-for 与对象：

<body>
    <div id="app">
        <div>
            <label for="">姓名：</label><input type="text" v-model="name">
            <label for="">分数：</label><input type="text" placeholder="0" v-model="score" @keyup.enter="add">
            <input type="button" value="添加" @click="add">
        </div>
        <div>
            <a href="#" @click="sorted">成绩降序</a><input type="button" value="随即打乱" @cilck="random">
        </div>
        <ul>
            <li v-for="(item,index) in list" :key="item.id">{{item.name}}{{""}}:{{""}}{{item.score}}
                <a href="#" @click="del(index)">删除</a>
            </li>
        </ul>

    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "",
            score: "",
            id: 6,
            list: [
                { id: 1, name: "张三", score: 90 },
                { id: 2, name: "张大", score: 60 },
                { id: 3, name: "张二", score: 55 },
                { id: 4, name: "张四", score: 80 },
                { id: 5, name: "张三", score: 80 },
            ]
        },
        methods: {
            del(index) {
                for (var i in this.list) {
                    if (i == index) {
                        this.list.splice(index, 1)

                    }

                }

            },
            add(){
                if(this.name.trim()=='')return;
                this.list.push(
                    {id:this.id,name:this.name,score:this.score}
                )
                this.id++;
            },
            sorted(){
                this.list.score(function(a,b){return b.score-a.score;})
            },
            random(){
                this.list.score(function(a,b){
                    return Math.random()-0.5
                })
            }
        }
    })
</script>

效果如下：

6. v-on

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
后面跟上.修饰符可以对事件进行限制，如keyup.enter，其他修饰符参考v-on修饰符大全
.enter可以限制触发的按键为回车
事件修饰符有多种

代码如下：

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
       <input type="button" value="点击" @click="doIt(666,'老铁')">   <!--老铁这个字符串由于点击事件的绑定是双引号，所以用单引号-->
       <input type="text" @keyup.enter="sayHi">
    </div>     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
       var app=new new Vue({
           el:"#app",
           methods: {
               doIt:function(p1,p2){   //给函数定义形参
                    console.log("做it");
                    console.log("p1");
                    console.log("p2");
               },
               sayHi:function(){
                   alert("吃了没");
               }
           }
       })
       
    </script>
</body>
</html>

效果如下：

7.v-model

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据回合表单元素的值相关联
绑定的数据和表单元素的值是双向绑定的（即改变数据表单的元素也会改变，改变表单元素的值数据也会改变）

代码如下：

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用v-model指令，在input文本框中内容改变时，h2中的内容也会改变。是因为input和h2绑定的都是message,并且input和meaage是双向绑定 -->
        <p>1.双向绑定</p>
       <input type="text" v-model="message">
       <h2>{{message}}</h2>
 
       <p>2.非双向绑定</p>
      <input type="text" v-bind:value="test">
      <h3>{{test}}</h3>
    </div>     
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script>
        // 逻辑
       var app=new new Vue({
           el:"#app",
           data:{
               message:"12345",
               test:"22222"
           }
       })
       
    </script>
</body>
</html>

效果如下：

ccq0133

关注

34
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
vue.js的安装与常用指令

Vue.js（通常简称为 Vue）是一种流行的 JavaScript 前端框架，用于构建用户界面。它采用了组件化的开发方式，通过将用户界面拆分为独立的可复用组件，使开发者能够更轻松地构建大型、复杂的应用程序。Vue.js 的核心思想是响应式数据绑定和组件化。它通过使用双向数据绑定机制，将数据与 DOM 元素进行关联，当数据变化时，页面会自动更新。同时，Vue.js 也提供了丰富的指令系统，用于操作 DOM 元素、控制显示和隐藏、处理用户输入等。
复制链接

扫一扫