Vue基础

一、基本语法

为什么组件内的data必须是函数？

为了让每个组件有自己的保存对象的实例，实现复用

v-xxx指令

v-bind 数据绑定，语法糖为:
- :class 动态绑定class，例：对象语法:class="{classA:true,classB:false}"
- :style 绑定style，例：对象语法:style="{fontSize:'20px',color:'red'}"
v-on 事件监听，语法糖为@
- .stop 阻止事件冒泡
- .self 当事件在该元素本身触发时才触发事件
- .capture 添加事件侦听器是，使用事件捕获模式
- .prevent 阻止默认事件
- .once 事件只触发一次
- .<keycode> 监听按键按下
v-model 数据双向绑定
- .lazy 把oninput 事件改成 onchange 事件
- .number 把 v-model 的值转换成数值类型
- .trim 过滤输入时首尾的空格字符
v-for for循环，遍历元素，建议绑定唯一标识:key
v-if、v-else-if、v-else 为true时显示
v-show 为true时显示
v-if和v-show效果一样，如果频繁切换状态请用v-show
v-once 只渲染一次，后面改动数据也不会重新渲染
v-html 以html方式进行渲染
v-text 把绑定的数据覆盖标签内的内容
v-pre 原封不动的展示，不进行解析
v-cloak 用来解决浏览器会显示未编译的mustache语法，防止闪动

//.css
[v-cloak]{
    display:none;
}

在html中展示data数据，使用mustache语法，即双括号{{}}包裹

Vue实例中的options

el 管理的域，用id属性来获取
data 存放变量
methods 存放函数
computed 计算属性，用来动态计算获取属性
watch 监听某个变量的变化
注: 深度watch监听对象内部的改变，数组的改变不需要使用深度watch

二、创建简单app

<html>
<head>
    <style>
        [v-cloak] {
            display:none;
        }
    </style>
</head>
<body>
  <div id="app" v-cloak>
      <h1 :title="msg">名字是：{{name}}</h1> //页面显示 '名字是：张三'，鼠标放在h1上面显示'这是message'
      <h1>{{name11}}</h1>//显示计算后的名字 '张三11'
      <h2 :class="{classA:true,classB:false}">动态绑定class</h2>
      <h3 v-html="url"><h3>  //显示百度a链接
      <h3 v-text="msg">该内容会被"这是message"覆盖</h3>
      <ul>
          <li v-for="(item,index) in charArr" :key="index">{{item}}</li>//遍历li元素
      </ul>
      <button @click="btnclick">按钮</button>
  </div>
<script src="vue.js"></script>  //先下载vue.js 或者 使用cdn远程引入
<script>
const app = new Vue({
    el: '#app',
    data: {
        name: "张三",
        msg: "这是message",
        url: '<a href="https://www.baidu.com">百度</a>'，
        charArr: ['a','b','c']
    },
    methods: {
        btnclick() {
            console.log('按钮被点击了')
        }
    },
    computed: {
        name11() {
            return this.name + '11'
        }
/*   computed中的getter和setter
        name11(){
            set: function(newvalue) { //基本不用
                this.name = newvalue
            },
            get: function() {
                return this.name + '11'
            }
        }
*/
    },
    watch: {
        name(newvalue,oldvalue){
            this.name = newvalue + ',' + oldvalue
        }
/*  另一种写法
        name: {
            handler(newvalue,oldvalue){
            },
            immediate: true,  //第一次绑定也执行handler  
            deep: true  //深度监听
        }
*/
    }
})
</script>
</body>
</html>

最后编辑于：2020.09.19 10:40:48