Vue简单语法

最新推荐文章于 2024-02-04 14:52:21 发布

脚板心

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_45546279/article/details/103319765

版权

Vue入门

一、Vue介绍

Vue 是一套用于构建用户界面的vue基于MVVM模式渐进式框架。

二、Vue入门

2.1、Vue实例对象详情

1、 Vue实例挂载(el)的标签:
每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

<div id="app">
	<h1>{{message}}</h1>
</div>
<div class="vueClz">
	<h1>{{message}}</h1>
</div>

/* 
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
 */
//id挂载方式：
var app = new Vue({
	el : "#app",
	data : {
		message : "我是id挂载方式"
	}
});
//class挂载方式：
var app2 = new Vue({
	el : ".vueClz",
	data : {
		message : "我是class挂载方式"
	}
});

2、 Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上.

<div id="app">
	<h1>{{message}}</h1>
	<h1>
		{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
	</h1>
</div>
//vue的数据绑定在data属性上，data本身也是一个对象
var app = new Vue({
	el : "#app",
	data : {
		message : "我是一个很单纯的app",
		user : {
			name : "隔壁老王",
			age : 17,
			color : "pink"
		}
	}
});

3、 Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体方法都是被Vue对象调用,所以方法中的this代表Vue对象

<div id="app">
    {{message}}<br>
    {{user.name}}<br>
    {{user.age}}<br>
    {{eat("肉")}}
</div>
<script>
    /*
    *  new Vue({});创建一个vue对象
    *  el:挂载 根据一个id进行挂载 也可以根据class进行挂载
    *  data:数据
    *         message存在data里面数据,通过{{message}} 可以取值
    *        {{ message }}
    */
    //  创建一个vue对象
    var app = new Vue({
        el:"#app",
        data:{
            message:"我是数据",
            user:{
                name:"张三",
                age:12
            }
        },
        methods:{
            eat:function (food) {
                console.log(this.user.name+"吃"+food);
            }
        }
    });
    //修改值
    app.user.name="李四";
</script>

2.2、生命周期钩子

1、生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
2、钩子函数
例如：created代表在vue实例创建后；
我们可以在Vue中定义一个created函数，代表这个时期的构造函数

三、Vue架构认识

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

四、VueJS表达式

4.1、表达式语法
VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量
4.2、简单表达式

<div id="app1">
    <!--简单表达式  -->
    <h1>{{5+5}}</h1>
    <!-- 字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <!-- 减法-->
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <h1>{{"a"-"b"}}</h1>
    <!-- 乘 -->
    <h1>{{"5"*"5"}}</h1>
    <!-- 除 -->
    <h1>{{5/5}}</h1>

    <!-- 三目运算-->
    {{show?"男":"女"}}
    <!-- 字符串操作-->
    {{"大家好我是xxx"}}
    <br/>
    {{"大家好我是xxx".length}}
    <br/>
    {{message.length}}
    <br/>
    {{message.substring(1,5)}}
    <br/>
    {{message.substring(2,6).toUpperCase()}}
</div>
<script>
    var app1 = new Vue({
        el:"#app1",
        data:{
            show:true,
            message:"大家好我xxx"
        }
    });
</script>

4.3、对象操作

<div id="app1">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.eat()}}<br/>
    <hr>
    {{hobbys}}<br/><!--[ "唱", "跳", "rap", "篮球" ]-->
    {{hobbys[0]}}<br/><!--唱-->
    {{hobbys.length}}<br/><!--4-->
    {{hobbys.toString()}}<br/><!--// 唱,跳,rap,篮球-->
    {{hobbys.join("------")}}<--唱------跳------rap------篮球-->
</div>
<script>
    var user = {
        name:"张三",
        age:12,
        eat(){
            console.log("吃食物")
        }
    }
    var app1 = new Vue({
        el:"#app1",
        data:{
            user:user,
            hobbys:["唱","跳","rap","篮球"]
        }
    })
</script>

五、Vue指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
5.1、v-text指令

<div id="app">
    <span v-text="message"></span></br>
    <span v-html="user.username"></span>
</div>
<script>
    /**
     * 指令: v-开头,设置标签的效果  相当于标签里面的特殊属性
     * v-text :相当于innerText  不会解析，以字符串的形式展示
     * v-html:相当于innerHTML 会解析标签
     */
    var app = new Vue({
        el:"#app",
        data:{
            message:"我是xxx",
            user:{
                username:"<a style='color: red'>我是a标签</a>"
            }
        }
    })
</script>

5.2、v-for指令

<body>
<div id="app">
    <ul>
        <li v-for="hobby in hobbys">
            {{hobby}}
        </li>
    </ul>
    <ul>
        <li v-for="value in user">
            {{value}}
        </li>
    </ul>
    <!--下标-->
    <ul>
        <li v-for="(hobby,index) in hobbys">
            {{index}}----{{hobby}}
        </li>
    </ul>
    <!--下标+key-->
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}}----{{key}}----{{value}}
        </li>
    </ul>
    <!--表格-->
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="ter in teachers">
            <th>{{ter.id}}</th>
            <th>{{ter.name}}</th>
            <th>{{ter.age}}</th>
            <th>{{ter.sex}}</th>
        </tr>
    </table>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"我是xxx",
            user:{
                name:"张三",
                age:23,
                gender:"男"
            },
            hobbys:["唱歌","跳舞","rap","篮球"],
            teachers:[
                {id:1,name: "李老师", age: 31, sex: "男"},
                {id:2,name: "王老师", age: 23, sex: "女"},
                {id:3,name: "张老师", age: 34, sex: "女"}
            ]
        }
    })
</script>

5.3、v-bind指令

<div id="app">
    <img v-bind:src="images" v-bind:title="title"/>
    <!--简写-->
    <img :src="images" :title="title"/>
    <input v-bind="proper">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            images:"./img/1.jpg",
            title:"图片",
            proper:{
                type:"text",
                name:"username"
            }
        }
    })
</script>

5.4、v-model 指令

<div id="app1">
    <input type="text" v-model="message" />
    {{message}}
    <h1>绑定到type=checkbox的input表单元素</h1>
    打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
    踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
    data中的值:{{checkboxValue}}

    <h1>绑定到type=radio的input表单元素</h1>
    打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
    踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
    data中的值:{{radioValue}}

    <h1>绑定textarea素</h1>
    文本域:<textarea v-model="textAreaValue" value="yyyyy"></textarea><br/>
    data中的值:{{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/>
    data中的值:{{skills}}

</div>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            message:'xxxx',
            checkboxValue:["xxx"],
            radioValue:'xxx',
            textAreaValue:'我是练习时长两年半的偶像练习生',
            skills:'java'
        }
    });
</script>

5.5、v-show指令
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-show="show">我是真的</div>
    <div v-show="hidden">我是假的</div>
    <div v-show="age>20">年龄40岁</div>
</div>
<script>
    
    var app = new Vue({
        el:"#app",
        data:{
            "show":true,
            "hidden":false,
            "age":40
        }
    })
</script>

5.6、v-if指令

<div id="app">
    <div v-if="show">我是真的</div>
    <div v-if="hidden">我是假的</div>
    <div v-if="age>80">我大于80岁</div>
</div>
<script>
    /**
     *  v-if 如果不存在 就不会在页面上显示出来,标签也是没有
     *  v-show 控制标签里面的display :  如果值为false display:none
     */
    var app = new Vue({
        el:"#app",
        data:{
            "show":true,
            "hidden":false,
            "age":40
        }
    })
</script>

5.7、v-else-if指令

<div id="app1">
    <div v-if="age<20">小于20岁</div>
    <div v-else-if="age>=20 && age<40">年龄在20-40岁</div>
    <div v-else-if="age>=40 && age<60">年龄在40到60岁</div>
    <div v-else="age>=60">年龄大于60岁</div>
</div>
<script>
    /**
     *  v-if 如果不存在 就不会在页面上显示出来,标签也是没有
     *  v-show 控制标签里面的display :  如果值为false display:none
     */
    var app1 = new Vue({
        el:"#app1",
        data:{
            "age":40
        }
    })
</script>

脚板心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue简单语法

Vue入门一、Vue介绍二、Vue入门2.1、Vue实例对象详情2.2、生命周期钩子三、Vue架构认识四、VueJS表达式五、Vue指令一、Vue介绍Vue 是一套用于构建用户界面的vue基于MVVM模式渐进式框架。二、Vue入门2.1、Vue实例对象详情1、 Vue实例挂载(el)的标签:每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和...
复制链接

扫一扫