vue总结_牛客博客

alt

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js">注意检查这里的路径../</script>
</head>
<body>


    <!--设置不提示-->
    <script type="text/javascript" >
      Vue.config.productionTip = false;		
		
      const vm = new Vue({
			
        })
      vm.$mount('#')
    </script>
</body>
</html>

插值语法：标签体内容、指令语法

alt

单向数据绑定、双向数据绑定

alt

    <div id="test01">
        单向数据绑定 ：<input type="text" :value="name1">
        双向数据绑定 ：<input type="text" v-model="name2">
    </div>

用户代码片段简写 el和data的两种写法

el绑定模板：v.$mount('#test01')
data:函数式（推荐），由Vue管理的函数，一定不要写箭头函数，写了this就不是指定Vue实例了

const v = new Vue({
   data(){
       return{
             name1:'张三'
       }
	}
 })
// 绑定模板
v.$mount('#test01')

MVVM

M ：模型（Model）==> 对应data中的数据
V ：视图（View ） ==> 模版
VM ：视图（模型）==> Vue实例对象

数据代理：通过一个对象代理对另一个对象中属性的操作（getter、setter）

alt

数据代理的应用

alt

事件处理