VueJs: VueJs的基础用法和本地应用与练习

一. 基础

1.1 简介

1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动

1.2 Vue程序开发

1. 导入开发版本的Vus.js
2. 创建Vue实例对象, 设置[el]属性和[data]属性
3. 使用简洁的[模板语法]把数据渲染到页面上

1.3 el (挂载点)

1. [el]是用来设置Vue实例挂载(管理)的元素

2. Vue会管理el选择[命中的元素]及其内部的[后代元素]

3. 可以使用其他的选择器, 但是建议使用ID选择器

4. 可以使用其他的双标签, 不能使用HTML和BODY

5. 语法:

   <div id="app">
     黑马程序员
   </div>
   

   let app = new Vue({
        
   	el:"#app",
   	data:{
        
   		message:"黑马程序员"
   	}
   })
   

1.4 data (数据对象)

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

2. data中可以写[复杂类型]的数据

3. 渲染复杂类型数据时, 遵守js的[法语]即可

4. 语法:

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

   let app = new Vue({
        
       el:"#app",
       data:{
        
           message:"黑马程序员",
           array:[],
           obj:{
        },
       }
   })
   

二. 本地应用

2.1 介绍

1. 通过Vue实现常见的网页效果
2. 学习[Vue指令], 以案例巩固知识点
3. [Vue指令]指的是,以[v-]开头的一组特殊语法

2.2 v-text

1. 设置标签的文本值(textContent) --> 普通文本
2. 默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容
3. 内部支持写表达式

<div id="app">
	<h2 v-text="message">深圳</h2>
    <h2 v-text="info">深圳</h2>
    <h2>{
  { message }}深圳</h2>
</div>

<div id="app">
	<h2 v-text="message+'!'">深圳</h2>
    <h2 v-text="info+'!'">深圳</h2>
    <h2>{
  { message +'!'}}深圳</h2>
</div>

let app = new Vue({
   
    el:"#app",
    data:{
   
        message:"黑马程序员!!!",
        info:"前端与移动教研部"
    }
})

2.3 v-html

1. 设置元素的innerHTML
2. 内容中有html结构会被解析为标签
3. v-text指令无论内容是什么,只会解析为文本
4. 解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
    <p v-html=“content"></p>
</div>

let app = new Vue({
   
    el:"#app",
    data:{
   
        // content:"黑马程序员" 
        content:"<a href='#'>黑马程序员</a>"
    }
})

2.4 v-on

1. 为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中
5. 方法内部通过this关键字可以访问定义在data中的数据

示例:

<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIt">
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="双击事件" @dblclick="doIt">
    <h2 @click="changeFood">{
  { food }}</h2>
</div>

let app = new Vue({
   
    el:"#app",
    date:{
   
        food:"西蓝花炒蛋" // 点击[西蓝花炒蛋]添加一次[好好吃!]
    },
    methods: {
   
        doIt (){
   
            al