Vue 第一周

1.创建方法

var app = new Vue({
        el: "#app",
		方法一：data:{}对象式
        data:{
             massage:"刘嘉h是南通",

         },
    	方法二：data(){return{}}函数式
        //注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式
        data() {
            return {
                massage: "罗11是南通",
            }
        },
    	//存放函数
    	methods：{
    		fun(){
    			
    		}
    	}
    })

 1.date:用于定义变量的集合,通常与插值提供
 
 2.el:"容器名称，如id或class等"
 
 3.Vue实例.$mount("容器名称，如id或class等")
 注：$mount绑定方式一定放在实例最后
 
 绑定el方法:app.$mount("#app")
 注：搭建脚手架（vue-cli）后只能出现一个容器

2.绑定

指令1：绑定元素的属性 v-bind: 简写形式 :

<a v-bind:href="num">访问vue官网</a>
或者
<a :href="num">访问vue官网</a>

绑定herf的变量num的同时，在data里面给num赋值

data：{ 
  num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
}

指令2：绑定事件 v-on: == @

v-on:事件类型 事件类型一定不要加on

<button v-on:click="func()">点击</button>
或者
<button @click="func2()">点击2</button>

绑定事件的同时，也在methods中写上对应函数，不然会报错
每次写入新的函数在尾部用,隔开

methods：{
    		func(){
    			console.log("刘嘉h是南通")
    		},
    		func2(){
    		console.log("罗11是南通")
    	}
 }

3.判断和循环

指令1：v-if 做判断，隐藏(是否存在)

  <h3 v-if="true">我是一段文本11111</h3>
  <h3 v-if="x>10">我是二段文本11111</h3>
  <h3 v-if='y=="南通"'>我是三段文本11111</h3>
  <h3 v-if="arr.length>0">我是一很多段文本11111</h3>

只要是满足if条件的都能进入此判断并且显示此文本

指令2: v-for 遍历数组，对象，字符串，指定次数

//arr:[11,22,33,44,55]
<h1 v-for="(item,index) of arr" :key="index+item">
     {{item}}-----------{{index}}
</h1>

打印出来的结果是

由此可见：item是数组的值，而index是下标

指令3:v-show 隐藏(是否展示) 默认隐藏

<h3 v-show="true">我是一段文本55555555</h3>

指令4:v-else和v-else-if判断

  <h3 v-if="x<10">我是一段文本11111</h3>
  <h3 v-else-if="x>10">我是二段文本11111</h3>
  <h3 v-else>我是二段文本11111</h3>

v-if 做判断，隐藏(是否存在)
区别：对于元素只是一次可以选择使用v-if(消耗内存),操作次数多
v-show(并没有销毁元素)
注:
1.在vue2中，v-for优先级比v-if高
在vue3中，v-if优先级比v-for高
2. v-if和v-for不能同时使用
3、同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环

4.插值

<h1 v-text="txt">abc</h1>
<h1 v-html="htmls">abc</h1>
<h1 v-html="htmls">{{a}}</h1>

v-text和v-html，插值区别
1.v-text和v-html相同点：都会覆盖文本
不同点：v-text只读取文本，v-html读取标签
2.插值添加值，
注：不要在用提交时使用v-html,不要在动态渲染时时使用v-html

不要设置值的指令：v-else,v-cloak,v-once，v-pre

v-once设置了以后，更改值不会发生改变，优化性能
v-pre设置了以后，会让插值和指令失效

<h1 v-pre v-show="num==1">数字会不会加1{{num}}</h1>
<h1 v-once>{{num}}</h1>

5.数据绑定

v-bind:单向数据绑定：只能由data中的数据流向页面
v-model双向数据绑定：可以由data中的数据流向页面，也可以由页面(用户输入)流向data

<input type="text" :value="nums">
<input type="text" v-model:value="nums">