Vue脚手架搭建

码农大师

已于 2024-12-13 15:55:58 修改

阅读量1.2k

点赞数 16

文章标签： vue.js javascript 前端 vue

于 2023-12-22 16:30:11 首次发布

本文链接：https://blog.youkuaiyun.com/zc917619462/article/details/135129650

版权

本文围绕Vue2起步展开，介绍了使用前提，包括安装node.js和vue脚手架，创建vue项目；还说明了如何用Idea打开创建的vue文件，对创建出的文件进行介绍，最后提及代码简化相关内容，如去掉about会报错等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue起步(vue2)

vue文档: https://v2.cn.vuejs.org/

在这里插入图片描述
v-model 双向绑定: 把输入框里面的值,同步到代码中的值

{{ }} 变量、表达式渲染

<head>
 8.动态 class style
<style>
        .yanse {
            color: red;
        }
    </style>
</head>


<body>
第二步
    <div id="app">
        {{ message }}

        <div>
            {{ xiaochun }}
        </div>

1.筛选这个arr数组中的张三名字 有的话返回年龄的数据
        <div>
            {{ arr.find(v => v.name === '张三')?.age }}
        </div>
       2. v-html 渲染html
       <div v-html="htmlStr"></div>
       3.v-model双向绑定
       <input type="text" v-model="conut">
        <div>{{ conut}}</div>
       4.v-if 判断color这个值是否和下面color的表达式一致,一致就输出红色
        <div>
            <div v-if="color=== '红色'">红色</div>
            <div v-if="color=== '蓝色'">蓝色</div>
            <div v-else-if="黑色">黑色</div>
            <div v-else>白色</div>
        </div>
		5.动态变换链接
		<div>
            <a v-bind:href="url">跳转链接</a>
            简写
            <a :href="url">跳转链接</a>
        </div>
        6.@click="定义的名字" @事件绑定 需要定义方法 而方法需要再methods中定义
        <div @click="nihao">事件绑定</div>
       6.1 假设让一个数据来回变换颜色 第一个颜色要对应
       <div style="color: red" id="tiao"> 事件绑定</div>
       7.v-for 循环 item:值 index:键
       <div v-for="(item,index) in xun" :key=index>{{ (index+1)+'.'+item }}</div>
       7.1 假设数组里面有对象
       <div v-for="(item,index) in dx" :key="index">{{index+ item.name}}</div>
       只拿name一个值
       <div v-for="item in dx":key=item.name>{{ item.name}}</div>
8.class 动态
 <div style="display: flex;margin-top: 50px;">
            <div style="padding: 0 10px;" :class="{'yanse' : item === sy}" v-for="item in dl" :key="item">{{item}}</div>
        </div>
    </div>


    <!--  引入vue.js -->   第一步
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第三步
    <script>
        var app = new Vue({
            el: '#app', //绑定的值  例:绑定的是上面的app
            data: {
                message: 'Hello Vue!',
                xiaochun: 1, //可以随便添加值
                arr: [{
                    name: '张三',
                    age: 20
                }],
                htmlStr: '<strong>这是渲染htmlStr标签的</strong>',
                conut: '',
                color: '红色',
                url:'https://v2.cn.vuejs.org/',
                xun: ['苹果', '香蕉', '橙子', '橙子'],
                dx:[{name:'张三'},{name:'李四'}],
8 动态class     dl: ['首页', '教师', '学生'],
                sy: '首页'

            },
            methods: {
                nihao() {
                    console.log('我点击了div');
                    
6.1 document.getElementById('tiao') 根据id获取他的元素
    
                    let s = document.getElementById('tiao').style.color
                    document.getElementById('tiao').style.color = s === 'yellow' ? 'red' : 'yellow'
                }
            },
        })
    </script>

</body>

动态 class style
在这里插入图片描述

1.vue使用前提

1.安装 node.js https://nodejs.cn/download/

在这里插入图片描述

测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口

      输入：node -v     // 显示node.js版本

            npm -v      // 显示npm版本

2.安装vue脚手架
(1)安装脚手架 /如果想要卸载vue 使用这个命令 npm uninstall -g @vue/cli
npm install -g @vue/cli 或指定版本 npm install -g vue-cli@2.5(版本号)
(2) 检测安装是否成功查看版本号
vue --version
(3)创建vue项目
vue create vue(创建的名字)
第一步创建
在这里插入图片描述