【vue 入坑指南 一】 vue 基础语法

版权声明：版权：cometang--唐家世少所有 https://blog.csdn.net/qq_39005315/article/details/84339617

vue 基础语法

1.模板语法

1.1 Mustache语法

{{msg}}		//在html获取data中msg变量的值

1.2 Html赋值

v-html="" 	//将内容当成html标签输出    .html()类似

1.3绑定属性

v-bind:id="" //新增绑定一个标签的属性   .attr()类似

1.4 表达式

{{1?'成功':'失败'}}		//三目运算表达式

1.5 文本赋值

v-text = ""		// 和 vue的 {{}} 功能类似 做文本展示

1.6 指令

v-if=""		//条件判断

1.7 过滤器

//字符过滤 数值过滤 字段值过滤 金额格式化  字母大小写
{{message | capitalize}}    		//方法一
v-bind:id="rawld | foprmatld" 		//方法二
		

2. 常用基础语法

2.1 判断class名是否显示 该class名是否生效

2.1.1 内部是一个对象的语法

//active   是style的class名
//isActive 是data中的变量  isActive为true,显示class;为false，不显示class名 

v-bind:class="{active:isActive,'text-danger:hasError'}"  
		

2.1.2 内部是一个数组的语法

//将之前写在对象中的数据直接写在data之中 效果相同
<div v-bind:class="[activeClass,errorClass]">
data:{
  activeClass:'active',
  errorClass:'text-danger'
}

2.2 写标签内嵌的style

//activeColor与fontSize 均为data中的变量名
v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

2.3条件渲染

 v-if 
 v-else  
 v-else-if
 v-show 
 v-cloak

条件结果为 true

​ v-if v-else v-else-if //渲染对应的Dom节点

​ v-show //渲染对应的Dom节点 并设置css display:block

条件结果为false

​ v-if v-else v-else-if //不渲染对应的Dom节点

​ v-show //渲染对应的Dom节点 并设置css display:none

 v-cloak //实际上不是条件渲染,在网速太慢或请求太快，Dom资源加载缓慢，可以使用 v-cloak隐藏html代码

2.4 事件处理器

2.4.1事件绑定

v-on:click="greet" 
@click="greet"		//greet 是methods 的方法名

2.4.2 事件修饰符

v-on:click.stop  	//stop 阻止事件冒泡
v-on:click.prevent	//prevent 阻止按钮默认事件  submit阻止了就不会刷新页面
v-on:click.self 	//self	只给当前的按钮绑定事件，如果当前按钮有子元素，单击子元素不							 触发事件
v-on:click.once		//once  只能让该按钮的事件触发一次

v-on:keyup.enter	//按 键盘 ‘enter’ 触发
v-on:keyup.tab		//按键盘‘tab’
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right

2.5 vue组件

1.全局组件和局部组件 

2.父子组件通讯-数据传递
	父组件->子组件  pops 
3.slot 

2.5.2 父子组件通讯-数据传递

动态传值

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Counter v-bind:num="num"></Counter>
  </div>
</template>

<script>
  import Counter from './Counter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:100,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    Counter
  },
}
</script>

父子组件同时 更新数据 同时完成事件动作 数据双向同步 vuex也可以实现
​