Vue-基础

Posted 2020-12-17 miao91

基本使用：

一个Hello Vue实例：

<div id="app">
　　{{msg}}
</div>
<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            msg:‘Hello Vue‘
        }
    })
</script>

其中：

• el表示元素挂载位置，值可以是CSS选择器或者DOM元素；
• data表示模型数据，值为对象；
• {{msg}}的方法为插值表达式的用法，可以将数据填充到html标签中，插值表达式还支持基本的计算操作，如{{1+2}}、{{msg1 + ‘------‘ + msg2}}；

Vue代码运行原理：概述编译过程的概念(Vue语法—>原生语法)

模板语法：

　　前端渲染：把数据填充到HTML标签中；

　　前端渲染方式：

• 原生js拼接字符串：将数据以字符串的方式拼接到HTML标签中；缺点：后期维护难
• 使用前端模板引擎：基于模板引擎渲染，拥有自己的一套模板语法规则，相比拼接字符串代码规范，易维护，没有专门提供事件机制
• 使用Vue特有的模板语法：
  • 插值表达式
  • 指令

    指令：本质就是自定义属性，其格式是以v-开始(如v-cloak)

  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构