Vue注意事项

最新推荐文章于 2021-08-01 12:40:47 发布

Leifeng27

最新推荐文章于 2021-08-01 12:40:47 发布

阅读量215

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/Leifeng27/article/details/115737078

版权

注意事项
//不要把id挂载在body上
vue中几种常见的属性：
data //用于存放数据
methods //用于存放方法需要手动触发执行
computed //用于存放计算属性用函数的样式写 retrun数据默认执行(计算属性不是方法是属性,只是用方法的样式写) 默认只设置了get方法
watch //侦听属性,侦听某一个数据变动(优先使用计算属性)
vue中的this指的是vue整个实例化对象
vue创建时data里面的数据是响应式的以后在添加的就是非响应式的如果想加入响应式的数据需要使用$set
vue常用的几种指令：
1.v-model=数据 //写在元素属性上用在input上v-model 等同与 v-bind:vlalue
v-bind:属性名=数据(v-bind可以简写成 : )
2.{{数据}} //写在元素内容上即 Musrache语法—>双大括号语法
3.v-on:事件=方法(v-on可以简写成 @ ) //写在元素的属性上
4.v-if=判断
v-eles-if //写在元素属性上如果为真保留，为假删除
5.v-show=判断 //写在元素属性上如果为真显示，为假隐藏
7.v-for
eg：

<body>
	<div id="app">
		<input type="text" v-model=one>+<input type="text" v-model=two> = <span>{{sum}}</span><br>
        <!-- <button v-on:click="xxx()">运行</button> -->
       	<span>{{name}}</span>
        <span>{{now}}</span>
        <p v-if="is">我今年{{age}}岁</p>
        <ul>
        	<li v-for="(item,index) in wife" :key="index">{{item.name}}今年{{item.age}}岁</li>
        </ul>
        <a :href="url">百度</a>
	</div>
</body>

<script src="./js/vue.js"></script>
	<script>
    	var vm = new Vue({
        	el: "#app",
            data: {
                one: 1,
                two: 2,
                age: 21,
                is: true,
                name: "张三",
                wife: [
            	    { name: "zhangshan", age: 12 }, 
            	    { name: "lisi", age: 14 }, 
            	    { name: "wangwu", age: 13 }, 
            	    { name: "maliu", age: 11 }
                ],
                url:"http://www.baidu.com",
            },
            //计算属性
            computed: {
                sum() {
                    return (this.one - 0) + (this.two - 0)
                },
                now() {
                    return new Date().getTime()
                }
            },
            //方法
            methods: {
                xxx() {
                    this.sum = (this.one - 0) + (this.two - 0)
                }
            },
            //侦听属性,侦听某一个数据变动(优先使用计算属性)
            watch: {
                age(new_val, old_val) {
                    if (val < 0) {
                        this.age = old_val
                    } else {
                        this.age = new_val
                    }
                }
            }
        })
    </script>

Leifeng27

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue注意事项

注意事项//不要把id挂载在body上vue中几种常见的属性：data //用于存放数据methods //用于存放方法需要手动触发执行computed //用于存放计算属性用函数的样式写 retrun数据默认执行(计算属性不是方法是属性,只是用方法的样式写) 默认只设置了get方法watch //侦听属性,侦听某一个数据变动(优先使用计算属性)vue中的this指的是vue整个实例化对象vue创建时data里面的数据是响应式的以后在添加的就是非响应式的如果想加入响应式的数据需
复制链接

扫一扫