vue-Day01

最新推荐文章于 2024-07-20 10:36:53 发布

囬香豆

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量160

点赞数 1

文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44470298/article/details/103750072

版权

1、ES6

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范

ES6就是javascript用的最多语言规范.已经被各个浏览器实现了

ES6的语法

(1)语法

let 声明块级变量

//（1）let 声明块级变量 （局部变量）, var 全局变量
for(var i=0;i<10;i++){
    console.log(i);
}
console.log("i="+i);

console.log("---------------let---------------------")

/*for(let j=0;j<10;j++){
    console.log(j);
}
console.log("j="+j);//报错*/

(2)const

相当于java中的fanal，一旦赋值不能更改

const s = 194;
console.log(s);
// s=20;   如果修改就报错

(3)解构表达式

//解构数组
let arr = [1,2,3];
let [s1,s2,s3]=arr;//解构
console.log(s1,s2,s3);
console.log(s2);

//对象解构
let obj = {"name":"王天霸","age":30};
let {name,age} = obj;//解构
console.log(name+"芳龄:"+age);

(4)箭头函数

let cxk = {
    sing:function(){
        console.log("唱");
    },
    jump(){
        console.log("跳")
    },
    play:(name)=>{
        console.log(name+"会打篮球")
    }
}
cxk.sing();
cxk.jump();
cxk.play("蔡徐坤");

console.log("----------------箭头函数和解构表达式合并使用----------------------");
let say = ({name})=> console.log("我是"+name);
let person = {
    name:"蔡徐坤"
}
say(person);

(5)模块化

暂时无法测试

import/export

2、Vue

Vue概念

(1)Vue是构建界面的渐进式的js框架（前端框架）

(2)只关注视图层，采用自底向上增量开发的设计。

(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定

Vue使用方法

(1)在项目里面运行 npm install vue

(2)在页面引入vue.js

<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

(3)测试代码

<div id="app">
    
    {{name}}
    
</div>

(4)el挂载

el:挂载,把vue对象挂载到对应的标签上面去

el方式:

(1)id的方式进行挂载

<body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"cxk"
        }
    });
</script>

(2) class方法进行挂载

<body>
    <div class="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:".app",
        data:{
           name:"cxk"
        }
    });
</script>

1、data数据

data:可以放字符串对象和数组

data: {
            name: "cxk",
            user: {
                name: "坤坤",
                age: 18,
                hobby: ["唱", "跳","rap"]
            }
        }

2、methods方法

methods:{
            add(s){
                console.log("增加一个对象"+s)
            },
            delete(){
                console.log("删除一条数据")
            },
            searche(){
                console.log("高级查询")
            }
        },

3、Vue生命周期

created

表示创建完vue对象的时候,执行内容

mounted

类似于window.onload

表示页面所有的内容加载（渲染）完之后,执行内容

4、数据双向绑定

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!-- 引入vue.js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg" v-on:change="changeData"/>
    {{msg}}
</div>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            name: "cxk",
            msg:"改变这个msg内容同时改变"
        },
        methods: {
            changeData(){
                console.log(this.msg);
            }
        }
    });

</script>
</html>

5、v-html指令

对应的改变值

<body>
<div id="app">
    <span v-text="name"></span>--------v-text不能被解析<br>
    <span v-text="user.name"></span>-----v-text不能被解析
    <span v-html="user.name"></span>----v-html已经被解析了
</div>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            name:"<h1>cxk</h1>",
            user:{
                name:"<h2>蔡徐坤</h2>"
            }
        }
    });
</script>

6、v-for指令

循环

<body>
<div id="app">
    循环数组
    <ul>
        {{user.name}}技能↓
        <li v-for="hobby in hobbys">
            {{hobby}}
        </li>
    </ul>
    <hr>

    循环对象
    <ul>
        <li v-for="u in user">
            {{u}}
        </li>
    </ul>
    <hr>

    带索引循环数组
    <ul>
        <li v-for="(hobby,index) in hobbys">
            {{hobby}}---------{{index}}
        </li>
    </ul>
    <hr>

    带键、值和索引循环对象value key  index
    <ul>
        <li v-for="(value,key,index) in user">
            {{key}} ---- {{value}} ---- {{index}}
        </li>
    </ul>
    <hr>

    循环json数据
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</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>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            user:{
                name:"蔡徐坤",
                age:18,
                sex:"女？"
            },
            hobbys:["唱","跳","rap","篮球"],
            students: [
                {id:1,name: "张飞", age: 29, sex: "男"},
                {id:2,name: "赵云", age: 30, sex: "男"},
                {id:3,name: "关羽", age: 31, sex: "男"}
            ]
        }
    });
</script>

7、v-bind指令

<body>
<div id="app">
    <img width="100" src="img/1.jpg">
    <img width="100" v-bind:src="imgSrc">
    <img width="100" :src="imgSrc">
    <input type="text" name="username">
    <input v-bind="ShuXing"/>
</div>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            imgSrc:"img/1.jpg",
            ShuXing:{
                type:"text",
                name:"username"
            }
        }
    });
</script>

8、v-model指令

<body>
<div id="app">
    v-model控制标签的属性的value值<br>
    v-bind控制标签的属性“类别”
    <h1>(1)绑定普通的字符串值</h1>
    <input v-model="inputValue" />
    {{inputValue}}


    <h1>(2)绑定到type=checkbox的input表单元素</h1>
    唱:<input type="checkbox" v-model="checkboxValue" value="唱"><br/>
    跳:<input type="checkbox" v-model="checkboxValue" value="跳"><br/>
    rap:<input type="checkbox" v-model="checkboxValue" value="rap"><br/>
    rap:<input type="checkbox" v-model="checkboxValue" value="篮球"><br/>
    我会:{{checkboxValue}}


    <h1>(3)绑定到type=radio的input表单元素</h1>
    打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
    踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
    技能:{{radioValue}}


    <h1>(4)绑定到文本域的值</h1>
    <textarea v-model="textAreaValue"></textarea>
    文本域中的值:{{textAreaValue}}

    <h1>(5)下拉框的值</h1>
    <select v-model="skills">
        <option value="rap">rap</option>
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="篮球">篮球</option>
    </select>
    {{skills}}
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            inputValue:"绑定普通字符串",
            checkboxValue:[],
            radioValue:"打篮球",
            textAreaValue:"绑定到文本域",
            skills:"默认值"
        }
    });
</script>

8、v-show指令

<div id="app">
    <div v-show="show">是否显示了?</div>
    <div v-show="hidden">是否显示了？</div>
    <div v-show="score>80">是否显示了?</div>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            "show":true,
            "hidden":false,
            "score":50,
        }
    });
</script>

9、v-if指令

<body>
v-show是设置display属性来隐藏节点<br>
v-if直接不显示节点
<div id="app">
    <div v-if="age < 18">你还未成年，还不能学习java</div>
    <div v-else-if="age>18 && age<60 ">你成年了，可以学java了</div>
    <div v-else>你年纪太大了，不适合学java了</div>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data: {
            age:80
        }
    });
</script>

囬香豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-Day01

1、ES6ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范ES6就是javascript用的最多语言规范.已经被各个浏览器实现了ES6的语法(1)语法let 声明块级变量//（1）let 声明块级变量（局部变量）, var 全局变量for(var i=0;i<10;i++){ console.log(i);}console.l...
复制链接

扫一扫