Vue知识系列-VS Code的安装+Vue环境的搭建+Vue指令

一、VS Code下载地址

Visual Studio Code - Code Editing. Redefined

二、VS Code初始化设置 

1.安装插件

在安装好的VSCode软件的扩展菜单中查找安装如下4个插件

2、创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。

然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

3、保存工作区

打开文件夹后，选择“文件 -> 将工作区另存为...”，为工作区文件起一个名字，存储在刚才的文件夹下即可。

4.在工作区下可以创建文件夹和文件

如创建vuedemo文件夹

5. 在文件夹中创建html文件

在vuedemo文件夹创建"vue入门.html"文件,在空白文件中可使用快捷方式(输入英文 ! )生成html模板。

三、Vue构建页面前端框架

1. 构建页面前端框架的步骤

步骤一： 创建html页面，使用vscode快捷键(英文 ! )生成html代码

步骤二：在body中使用

步骤三：在html页面的body中创建div标签，div添加id属性。主要是为了指定内容显示的地方。

步骤四：在body的

步骤五：使用差值表达式获取data里面定义值：{{}}

{{message}}

Vue前端框架

    
    

        {{message}}
    
    

四、Vue指令

1. v-bind 指令：

单项数据绑定，这个指令一般用在属性标签里面，获取值。V-bind可以简写为冒号 :

    
    

        
{{content}}
        
        
{{content}}
    
    

2. v-model:双向绑定

V-model绑定的属性的值，会根据页面输入的值而变化。属性的值变化，页面也会跟着变化。

    
    

        
        
        
{{school.name}}的地址:{{school.adress}}
    
    

3. v-on 指令绑定事件

v-on:click表示处理鼠标点击事件，事件调用的方法定义在vue对象声明的methods节点中。

v-on:click可以简写为@click

    
    

        
        查询
        
        查询1
    
    

4. 修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为

data: {
    user: {}
}

    
        
        保存
    

methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表单')
        } else {
            alert('请输入用户名')
        }
    }
}

5、条件渲染

v-if：条件指令

if执行

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

6、列表渲染

v-for：列表循环指令

例1：简单的列表渲染

    
{{ n }} 


    
    
{{ n }} - {{ index }} 

例2：遍历数据列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

    
    

        
{{index}}
        
{{item.id}}
        
{{item.username}}
        
{{item.age}}
    

五、Vue生命周期 

    

    

        update
        
{{message}}
    

    

六、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库。

1、引入js

2、编写html

    
Hello App!
    

        
        
        
        首页
        会员管理
        讲师管理
    
    
    
    

3、编写js