vue的入门

最新推荐文章于 2024-10-06 20:16:20 发布

置顶成许愿

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量146

点赞数

文章标签： vue java v-model

本文链接：https://blog.csdn.net/weixin_45471212/article/details/103318415

版权

本文介绍了Vue作为前端框架的发展背景，包括HTML、CSS+JavaScript、AJAX、Node.js等基础知识，然后详细讲解了Vue的安装步骤，并探讨了Vue的核心特性如v-bind、v-model、v-for和条件渲染指令。此外，还涉及了变量声明和导入导出等基本概念。

摘要由CSDN通过智能技术生成

VUE 的了解

1.vue 前端框架(发展了解)

1.1html–超文本标记语言(静态网页)

1.2.css +javascript --动态的网页(jsp/php/asp)

1.3.ajax —局部刷新技术----h5

1.4.node.js —前端的后台的写法 /java

1.5.vue ,elementUI…前后端的分离的项目

流行的就是架构就是mvvm

前后端分离项目

2.Vue的安装

2.1 先 1.安装nodejs的环境 – 2.在idea中安装nodejs插件-- termital 在安装 npm init -y

创建vue npm install vue

3.vue的运用

3.1 let(块) var(全局) const(常量) 的区别

for(var i =0;i<4;i++){
             console.log(i)
         }
         console.log(i);
         console.log("----------------");
         for(let j  =0;j<5;j++){
             console.log(j)
         }
        console.log(j);
      const util= 5;  //const 是定义常量不能再赋值

3.2,解构数组和对象

let arr=[1,2,3];
        let [a1,a2,a3]=arr;
        console.log(a1);
        console.log(a2);
        console.log(a3);*/
        //解构对象
        /*let student={"name":"小包","age":18};
        let {name,age}=student;
        console.log(name);
        console.log(age);

3.3,解构表达式+箭头表达式

const person={
            name:"张三",
            age:18
        }
        function hello(person) {
            console.log(person.name)
        }
        var hello1 =({name})=>console.log(name)
        hello(person);
        hello1(person);

3.4 导入导出

导出
//第一种
export const util={
    sum(a,b){

        return a+b;
    }
}
//第二种
let name ="张三"
let age  =18
export {name,age}

//第三种

export default {
    sum(a,b){

        return a+b;
    }
}
导入
import num from 'a.js'
import {name,age} from 'a.js'
import xxx from 'a.js'

3.5简单的运算

<h1>{{5+5}}</h1>
    <!-- +:运算，字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <!-- -：减法 -->
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <!-- *:乘 -->
    <h1>{{"5"*"5"}}</h1>
    <!-- / 除-->
    <h1>{{5/5}}</h1>
    <h1>{{5/5}}</h1>
    <!--三目运算的运用-->
    {{show?"男":"女"}}
    <hr>
   <!--字符串操作-->
    {{"郭宝贝121121"}}<br/>
    {{"郭宝贝121121".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>

3.6 标签的 v-的使用

<body>
<div id="app">
    <span v-text="msg"></span>
    <hr>
    <span v-text="user.name"></span>
    <hr>
    <span v-html="msg"></span>

</div>
<script>
    new  Vue({
        el:"#app",
        data:{
            msg:"<h1>你好java</h1>",
            user:{
              name:"琴琴"
            }
        }
    })
</script>

</body>

v-bind

<body>
<h1>v-bind将一个对象键和值作为标签的属性的名字和值时,后不需要指定属性的名字</h1>
<div id="app">
    <img v-bind:src="imgsrc" v-bind:title="title">
    <img :src="imgsrc" :title="title">
    <input v-bind="props"/>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            imgsrc:"./img/1.jpg",
            title:"美美",
            props:{
                type:"text",
                name:"sansan"
            }
        },
     });
</script>
</body>

v-model

<body>
<h1>v-model双向绑定 作用于type </h1>
<div id="app">
    <h1>绑定到type=text的input表单元素</h1>
    姓名:<input type="text" v-model="inputValue"><br/>
    {{inputValue}}

    打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
    踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
   {{checkboxValue}}

    打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
    踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
   {{radioValue}}

    <h1>绑定到textarea的元素文本区域</h1>
    简介:<textarea v-model="textareaValue"></textarea><br/>
    {{textareaValue}}


    <h1>绑定到单选的select的元素,下拉框</h1>
    技能:<select v-model="skills">
            <option value="java">java</option>
            <option value="php">php</option>
            <option value=".net">.net</option>
        </select><br/>
    {{skills}}

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "初始化的值",
            //复选
            checkboxValue: ["踢足球"],
            //单选
            radioValue: "打篮球",
            //文本区域
            textareaValue: "java就是NB!",

            skills: "java",
        },
     });
</script>
</body>

v-for

<body>
<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index}}---{{key}}--{{value}}</li>
    </ul>
    <hr>
    <h1>遍历数组和对象获取表</h1>
    <table >
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
    </table>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
        hobbys : ["爬山","游泳","打豆豆","睡觉"],
        student : {
                    name: "mao毛",
                    age: 222,
                    sex: "男",
                  },
         students: [
                {id:1,name: "高傲", age: 19, sex: "男"},
                {id:2,name: "菲菲", age: 12, sex: "女"},
                {id:3,name: "梅梅", age: 18, sex: "女"}
            ]
        },
        num : 10,
        str : "abcdefg",

     });
</script>
</body>

v-show v-if

<body>
<h1>v-show </h1>
<div id="app">
    <h1>v-show不满足条件 标签属性 style="display: none; </h1>
    <div v-show="show" >看见</div>
    <div v-show="hidden" >躲猫猫</div>
    <div v-show="score>80" >优秀</div>
    <hr>

    <h1>v-if 不满足条件 标签将会删除 </h1>
    <div v-if="show" >看见</div>
    <div v-if="hidden" >躲猫猫</div>
    <div v-if="score>80" >优秀</div>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":false,
            "score":90,
        },
     });
</script>
</body>

v-if v-else

<body>
<div id="app">
    <div v-if="isVip">欢迎会员</div>
    <div v-else>请充值</div>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isVip: false
        },
     });
</script>
</body>

v-if v-else -if v-else -if v-else

<body>
<div id="app">
    <h1>v-else可以不写条件v-if= v-else-if </h1>
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            score: 100
        },
     });
</script>
</body>