转前端的第一天

最新推荐文章于 2024-06-19 20:53:45 发布

Yokna

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量476

点赞数 3

分类专栏：前端文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/Yokna/article/details/120586327

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转前端的第一天

国庆好无聊呀，莫事干只好敲一敲代码，原计划跟朋友准备去看panda，想了想两个人会不会很尴尬，还是等人多起来再去吧。

1.准备工作

准备好环境

1.nodejs

2.vue/cli

使用powershell创建一个vue项目

cd + 项目存放路径
vue create + 项目名

在这里插入图片描述

出现以上问题不要慌张

输入以下命令，修改其执行策略。

set-ExecutionPolicy RemoteSigned

在这里插入图片描述

根据提示创建好项目后，进入到项目目录，把项目先跑起来

npm run serve

在这里插入图片描述

访问本地8080后显示如下，就说明项目成功启动

在这里插入图片描述

2.基本语法

以引入script文件为例来说，首先第一步，创建一个html文件，需要导入vue的js文件,官网上快速开始的样例如下：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

完整是这样的

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Vue基础</title>
</head>
<body>
    <div id = "app">
        <!-- 差值表达式 -->
        {{ message }}<br>
        {{ myMessage.name }}<br>
        <ul>
            <li>
                {{girlFriends[0]}}
            </li>
        </ul>
        <h2 v-text="message">打招呼</h2>
        <h2>打招呼{{message}}</h2>
        <p v-html="message"></p>
        
        <input type="button" value="v-on" v-on:click = "doIt">
        <input type="button" value="v-on" @click = "doIt">
    </div>

    <script>
        var app = new Vue({
            // #是id选择器，设置挂载点
            el:"#app",
            data:{
                message:"hello Vue!",
                myMessage:{
                    name:"yokna",
                    mobile:"181xxxxxxxx"                   
                },
                girlFriends:["girl1","girl2","girl3"]
            },
             methods:{
                doIt:function(){
                    alert("ahahaha");
                }
            },
        })
    </script>
</body>
</html>

script中创建一个vue实例，然后通过id选择器选择需要挂载的dom元素上，data中写待用的数据，这样就可以将数据渲染出来。

v-text:将字符内容绑定到标签上

v-html:将html内容绑定到标签上，并且自动解析成html标签

v-on：为元素绑定一个事件，可以替代成@

v-show:设置一个组件是否显示，一般来说与data中的数据配合使用

v-if:根据表达式的真假值，来切换元素的显示与隐藏

v-bind:设置元素的属性，也可以用:来代替

	<div id = "app3">
        <input type="button" value="是否显示图片？" @click = "changeIsShow">
        <img src="img.jpg" v-show="isShow">
        <img src = "img.jpg" v-if="isShow">
        <img :src="imgSrc" :title="imgTitle+'!!!'">
    </div>


		var app3 = new Vue({
            el:"#app3",
            data:{
                age:17,
        		imgSrc:"img.jpg",
                imgTitle:"中秋快乐",
                isShow:true
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })

v-for:根据数据生成列表结构

v-on自定义参数以及事件修饰符

v-model:双向数据绑定

	<div id="app">
        <ul>
            <li v-for="(item,index) in food">
               {{index+1}} {{item.name}}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                food:[
                    {name:"rice"},
                    {name:"egg"}
                ]
            }
        })
    </script>

<div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
        <input type="button" value="修改M" @click="setM">
        <h2>
            {{message}}
        </h2>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"nihao",
                arr:[1,2,3,4,5],
                food:[
                    {name:"rice"},
                    {name:"egg"}
                ]
            },
            methods:{
                getM:function(){
                    alert("M function is running!")
                },
                setM:function(){
                    this.message = "setM";
                }
            }
        })
    </script>

今天是学起Vue的第一天，hac无聊学学。

Yokna

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
转前端的第一天

转前端的第一天国庆好无聊呀，莫事干只好敲一敲代码，原计划跟朋友准备去看panda，想了想两个人会不会很尴尬，还是等人多起来再去吧。1.准备工作准备好环境1.nodejs2.vue/cli使用powershell创建一个vue项目cd + 项目存放路径vue create + 项目名出现以上问题不要慌张输入以下命令，修改其执行策略。set-ExecutionPolicy RemoteSigned根据提示创建好项目后，进入到项目目录，把项目先跑起来npm run serve
复制链接

扫一扫