vue的七个属性，八个方法，七个指令

vue的七个属性，八个方法，七个指令七属性el：元素，标识vue语法的开始data：数据method：方法，存放js方法temple：模板，用来设置模板，会替换页面元素，包括占位符。render:渲染器，会创建virtual Dom,computered:用来计算watch：用来监听，watch:function(new,old){}监听data中数据的变化两个参数，一个返回新值，一个返回旧值&l

碧波排浪

3621人浏览 · 2021-08-06 17:23:28

碧波排浪 · 2021-08-06 17:23:28 发布

vue的七个属性，八个方法，七个指令

七属性

el：元素，标识vue语法的开始
data：数据
method：方法，存放js方法
temple：模板，用来设置模板，会替换页面元素，包括占位符。
render: 渲染器，会创建virtual Dom,
computered:用来计算
watch：用来监听，

watch:function(new,old){}

监听data中数据的变化
两个参数，一个返回新值，一个返回旧值

<div id="app">
    {{msg}}
      <div>这是模板的第一种使用方法1</div>
</div>
 
<template id="bot">这是模板的第三种使用方法，不常用3</template>
<script>
<div id="bot">模板的第四种创建方法4</div>
</script>
<script>
    var vm1 = new Vue({
        data: {
            msg: "data属性"
        },
        methods: {
            Personal:function () {
                console.log("methods方法存放方法")
            }
        },
        template: `<div>模板的第二种使用方法2</div>`,
        //template："#bot",
        render: (createElement) => {
            return createElement("h1",{"class":"类名"，"style":"color: red"},"这一个render属性创建的虚拟dom")
        },
    })
</script>

methods和computered都可以写方法，他们有什么区别？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head> <body>
<div id="app">
    <p>{{message}}</p> //直接在模板中绑定表达式
    <p>{{message.split('').reverse().join('')}}</p> //运用计算属性
    <p>{{reverseMessage}}</p> //运用methods方式
    <p>{{methodMessage()}}</p>
</div>
<script>
    var vm=new Vue({
         el:"#app",
         data:{
             message:"hello"
         },
        computed:{
            reverseMessage:function(){
                 return this.message.split('').reverse().join('');
            }
        },
         methods:{
             methodMessage:function () {
                 return this.message.split('').reverse().join('');
             }
         }
    })
</script>
</body>
</html>

在写法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加().

computered只要message值发生改变才会改变，methods进入页面就会改变。

vue的八个方法

初始化显示

*beforeCreate()
*created()
*beforeMount() 挂载前
*mounted() 挂载后

更新状态:this.xxx=value

*beforeUpdate()
*updated()

销毁 vue 实例:vm.$destory()

*beforeDestory()
*destoryed()

vue的七个指令

v-if 条件渲染指令
- 根据其后表达式的bool值进行判断是否渲染该元素
v-show
- 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”
v-else
必须跟在v-if/v-show指令之后，不然不起作用；如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素会显示在页面上
v-for
类似JS的遍历，用法为 v-for=“item in items”, items是数组，item为数组中的数组元素
v-bind
这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式，它的语法糖为 ‘：’
v-on
用于监听指定元素的DOM事件，比如点击事件，它的语法糖为 ‘@’ （诶哟不错哦）
v-model
- 用于表单元素，进行双向数据绑定

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^