Vue前端语法

最新推荐文章于 2024-08-23 13:45:37 发布

雪语.

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量902

点赞数 21

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xueyu188/article/details/135407695

版权

插值语法

1.被vue托管得标签中写{{}},内容可以写:变量,js简单得表达式和函数(函数要加括号执行,渲染的值为return的值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue使用</h1>
    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{sex}}</p>
    <p>{{hobby}}</p>
    <p>{{wife.name}}</p>
    <p>{{wife.age}}</p>
    <p>{{1+1}}</p>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            name: "张三",
            age: 18,
            sex: "男",
            hobby: ["吃饭", "睡觉", "打球"],
            wife:{age:18,name:"李四"}
        }
    })
</script>
</html>

文本指令

写在标签上,以v-xx开头的都是vue的指令

v-text:把变量渲染到标签中,如果之前有数据,覆盖掉原来的数据

v-html:把标签渲染到该标签位置中

v-show:决定该标签显示与不显示,true显示,false不显示,display：none

v-if:控制标签的显示与隐藏,demo的删除与插入

事件指令

v-on:事件名='函数',放在标签上面,简写可以直接用@符号

事件名可以写:click,dbclick,input标签:change,blur,input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令</h1>
    <button v-on:click="handershow">点我图片消失</button>
    <div>
        <img v-show="a"
             src="https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
    </div>
        <h1>文本指令</h1>
    <button @click="handershow">点我图片消失</button>
    <div>
        <img v-show="a"
             src="https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
    </div>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            name: "lqz",
            a: true
        },
        // 函数必须写在methods里面
        methods: {
            handershow: function () {
                // this指代的是vm对象,this.a = false 就是vm对象里面的a属性赋值为false
                // 这里进行取反操作
                this.a = !this.a
            }
        }
    })
</script>
</html>

属性指令

写在标签上的,name,class,id,src

v-bind:属性名='变量'

简写成：

v-bind:属性名='变量', :属性名='变量'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令</h1>
    <button @click="handershow">点我</button>
    <img :src="url" alt="">

</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            name: "lqz",
            url: 'https://img0.baidu.com/it/u=1839135015,723795615&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
        },
        methods: {
            handershow: function () {
                this.url = 'https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
            },
        }
    })
</script>
</html>

条件渲染

写在标签上:

v-if='布尔值/运算完是布尔值'

v-else-if='布尔值/运算完是布尔值'

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>条件渲染</h1>
    <div v-if="score>90">优秀</div>
    <div v-else-if="score>=80 && score<90">良好</div>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            score: 89
        },
        methods: {
        }
    })
</script>
</html>

v-for 循环数组、字符串、对象、对象、数字

v-for='key in obj'

--》如果是数组,key就是数组的一个个元素,

--》如果是数字,key就是从1开始的一个个数字,

--》如果是字符串,key就是一个个的字符,

--》如果是对象,key就对象的value值

v-for=(key,value) in obj

--》如果是数组,key就是数组的一个个元素,value就是索引

--》如果是数字,key就是从1开始的一个个数字,value就是索引

--》如果是字符串,key就是一个个的字符,value就是suoyin

--》如果是对象,key就对象的value值,value就是对象的key

属于与对象的检测与更新

动态给数组添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数组添加</h1>
    <button @click="handerClick">点击新增</button>
    <li v-for="value in girlList">
        {{value}}
    </li>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            girlList: ['qqq', 'vvv', 'ddd']
        },
        methods: {
            handerClick(){
                this.girlList.push('hhh')
            },
        }
    })
</script>
</html>

数据的双向绑定(input标签)

v-model:数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input标签</h1>
    <p>用户名:<input type="text" v-model="name"></p>
    <p>密码:<input type="text" v-model="password"></p>
    <button @click="submit">提交</button>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
        },
        methods: {
            submit() {
                console.log(this.name, this.password)
            }
        }
    })
</script>
</html>

input 事件

事件绑定 v-on:事件名='函数' -----@事件名='函数'

input 的事件:

-blur:失去焦点触发

-change:发生变化触发

-input:输入触发

事件修饰符

-stop:只处理自己的事件,不向父控件冒泡

-self:只处理自己的事件,子控件冒泡的事件不处理

-prevent:阻止a连接的跳转

-once:事件只会触发一次(适用于抽奖页面)

用法:@click.stop 这样就不会向父控件冒泡了

表单控制

单选以及多选:

我们选择的值其实是value里面写的

radio单选使用字符串

checkbox多选使用数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>表单控制</h1>
    <p>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="text" v-model="password"></p>
    <p>
        <input type="radio" v-model="gender" value="男"> 男
        <input type="radio" v-model="gender" value="女"> 女
    </p>
    <p>
        <input type="checkbox" v-model="hobby" value="篮球"> 篮球
        <input type="checkbox" v-model="hobby" value="足球"> 足球
        <input type="checkbox" v-model="hobby" value="乒乓球"> 乒乓球
        <input type="checkbox" v-model="hobby" value="橄榄球"> 橄榄球
        {{hobby}}
    </p>
</div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            isRemember: false,
            gender: '',
            hobby: []
        },
        methods: {}
    })
</script>
</html>

雪语.

关注

21
点赞
踩
19

收藏

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

事件名可以写:click,dbclick,input标签:change,blur,input。--》如果是对象,key就对象的value值,value就是对象的key。--》如果是字符串,key就是一个个的字符,value就是suoyin。--》如果是数字,key就是从1开始的一个个数字,value就是索引。事件绑定 v-on:事件名='函数' -----@事件名='函数'--》如果是数组,key就是数组的一个个元素,value就是索引。--》如果是数字,key就是从1开始的一个个数字,
复制链接

扫一扫