Vue学习笔记

Vue学习笔记

一、环境搭建

1、安装VS code

2、安装live server

3、安装科学上网工具

4、安装谷歌浏览器

5、安装Vue浏览器调试工具

二、安装Vue（两种版本）

1、导入开发版本的Vue.js

2、创建Vue实例对象，设置el属性和data属性

3、使用简洁的模板语法把数据渲染到页面上

    

        {{ message }}

    

三、el挂载点

el挂载点的作用是什么？

el是用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么？

Vue会管理el选项命中元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

四、data: 数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型数据

渲染复杂类型数据时，遵守js的语法即可

   

        {{ message }}

        

{{ school.name }}  {{ school.mobile }}

        

            

• {{ campus[0] }}

            

• {{ campus[1] }}

            

• {{ campus[2] }}

        

     

 

    

Hello Vue!

许多 19800000000

北京

上海

深圳

五、指令

1、内容绑定，事件绑定

v-text   v-html   v-on基础

2、显示切换，属性绑定

v-show   v-if   v-bind

3、列表循环，表单元素绑定

v-for    v-on补充   v-model

v-text  设置标签的文本值（textContent）

    

        北京

        上海

        

{{message + "？"}}上海