vue语法基本指令

最新推荐文章于 2022-12-07 16:12:07 发布

致可乐

最新推荐文章于 2022-12-07 16:12:07 发布

阅读量471

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/ling_xy/article/details/119279564

版权

本文详细介绍了Vue.js的基本指令，包括数据绑定{{}}, v-model, v-html/v-text, v-bind, v-show/v-if, v-for, v-on及其事件修饰符，以及如何处理本地图片和静态资源。讲解了数据绑定、条件语句、事件处理和组件的使用方法，是学习Vue语法的良好参考。" 113102659,8744887,R语言多元线性回归：变量选择与诊断,"['r语言', '统计分析', '回归模型', '数据诊断']

摘要由CSDN通过智能技术生成

一.目录及几个主要文件说明

目录结构：

build文件：打包之后的项目文件

config：配置目录（包括端口之类）

node_modules：依赖包文件

src：开发目录文件【开发只使用这个】包括：

assets：放置一些图片（如logo）

components：放置组件文件。可以不用

App.vue：项目入口文件（可以将组件直接写在这里，而不使用components目录）
（整个项目的主模板,通过webpack打包后会把整个文件放到index.html中，生成到id="app"中）

main.js：项目的核心文件。整个项目加载从这里开始

static：静态资源目录文件（本地图片，字体，css等非服务端）

test：初始测试目录，可删除

index.html：首页入口文件（可以加一些meta信息或代码统计之类）

package.json：项目配置文件

README.md：说明文档

webpack.config.js：webpack配置文件

1.创建项目（简化版）
vue init webpack-simple name

2.安装依赖
cnpm install

3.index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>demo-1</title>
  </head>
  <body>
  	//vue框架渲染元素  
    <div id="app"></div>   
    //APP.vue通过webpack打包后的整个文件  渲染到id="app"中
    <script src="/dist/build.js"></script>  
  </body>
</html>

4.清除APP.vue多余内容
它是整个项目的主模板,通过webpack打包后会把整个文件放到index.html中，生成到id="app"中

<template>
  <div id="app">
    
  </div>
</template>

<script>
//这里暴露出了主模板，
//所以main.js中才可以import App from './App.vue' 引用主模板
export default {
    
  name: 'app',

}
</script>

<style>

</style>

5.main.js

import Vue from 'vue'  //引入vue整个类对象
import App from './App.vue'  //引入主模板(因为APP.vue中export default暴露出了主模板)

//实例化vue对象
new Vue({
   
  el: '#app',  //配置关联元素
  render: h => h(App)  //渲染更新界面(回调函数)
})

二.vue语法

vue的开发模式是单组件模式开发全部是小的组件 .vue
加粗样式
组件的写法格式
<template></template> (template模板里面只能存在一个子元素div) , <script></script> , <style></style>（只有style可以有多个）

vue基本指令

指令中可以添加运算 ?:

1.数据绑定指令

1.{ {}} 数据模板指令进行数据绑定
【可以进行基本运算及 js代码】

APP.vue中：

<template>
  <div id="app">
    <div>{
   {
   msg}}</div>
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data(){
     //数据声明为函数型 返回对象(数据)
    return{
   
      msg:"Hello world!"
    }
  }
}
</script>

启动项目 cnpm run dev
在这里插入图片描述

2.v-model 表单元素数据绑定

<input type="text" v-model="msg">

(数据双向)：
在这里插入图片描述
3.v-html & v-text

v-html 元素的html内容绑定指令(解析html)
v-text 元素的文本值指令绑定

<template>
  <div id="app">
    <p>{
   {
   txt}}</p>
	<p v-text="txt"></p>
	<p v-html="txt"></p>
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data(){
     //数据声明为函数型 返回对象(数据)
    return{
   
      txt: "<span>span标签</span>"
    }
  }
}
</script>

在这里插入图片描述
指令中也可以进行基本运算及 js代码

<template>
  <!-- 模板中只能有一个子集div -->
  <div id="app">
   	<div v-html="list.slice(0,1)==0?'你好':'不好'"></div>
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data(){
     //数据声明为函数型 返回对象(数据)
    return{
   
      list:[0,1],
    }
  }
}
</script>

在这里插入图片描述

2.元素属性绑定 v-bind

v-bind 指令进行元素的属性值绑定的
eg： v-bind:title=“msg”;
简写 :title=“msg”

（1）

	<template>
	  <!-- 元素属性绑定以及简写 -->
	  <h3 v-bind:title="title">属性绑定全写</h3>
	  <h3 :title="title">属性绑定简写</h3>
	</template>
	
	<script>
	export default {
   
	  name: 'App',
	  data(){
   
	    return {
   
	      title: "标题",
	    }
	  }
	}
	</script>

在这里插入图片描述
（2）

<template>
    <input type="text" v-model="type">
    <input :type="type">
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data(){
    
    return{
   
      type:'text',
    }
  }
}
</script>