暑期实习第一天：vue的复习

一、vue的基础语法

1、vue是通过{{变量}}的形式访问实例化vue对象的模板变量：

<div id="app">
            <div>{{ message }}</div>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'vue的复习'
                }
            })
        </script>

el：指定vue渲染模板的根节点

data：存放当前页面/组件内容的相关的数据信息

注意：在做属性插值访问实例化vue对象的变量，用{{变量}}的方式无用，需要在对应的属性前加一个冒号：

如

：title='变量名'

2、vue的指令

v-html	相当于原生HTML中的ＩｎｎｅｒＨＴＭＬ，可以解析标签格式
v-text	相当于原生HTML中的ＩｎｎｅｒＴｅｘｔ，不可以解析成标签格式
v-bind	用于动态绑定属性，：属性为其简v-on
v-on	用于绑定事件，简写形式为＠click="事件名"
v-model	可以在表单中使用v-model实现数据双向绑定
v-if	vue的条件判断
v-for	vue的循环迭代