Vue学习第一天

Vue是一个用于构建用户界面的渐进式框架

Vue的工程目录介绍

1. assets存放项目中需要用到的资源文件，html，css，images
2. componets：存放Vue开发中一些公共组件
3. router：vue的路由配置文件
4. views：存放页面文件
5. app.vue：根组件
6. main.js：项目的入口文件，定义了vue的实例并引入根组件app.vue，将其挂载到index.html中id为app的节点上

Vue创建实例的过程

指定配置项中el指定的是挂载点，即渲染的是选择器对应的html标签的内容

data提供的是数据，即内容

<div id = 'app'>
{{Name}}
</div>
<script>
  const app = new Vue({
  el:'#app',
  data:{
    Name:'tony'
  }
  })
  </script>

声明式渲染

template是模板的意思，每一个vue文件中必须要有一个，在这里写HTML代码

在script标签中写js代码，在style标签中写css代码

在template里面只允许有一个块状元素，其他所有标签都在这个块状元素内

插值表达式渲染--字符串

<!--首先在template部分确定插值表达式的位置并填充变量名-->
<template>
  <h2>{{title}}</h2>
</template>
<!--在script部分定义字符串变量-->
<script>
  <!--export default 是固定格式-->
  export default{
    name:'app',
    data(){
      return {
        title:'渲染字符串'
      };
    }
  };
</script>

<!--在style部分添加样式-->
<!--scope的意思是表示这段样式只在本vue文件中生效，其他vue文件不生效-->
<style scope>
h2{
  color:deeppink;
  border:1px solid #cccccc;
}
</style>

插值表达式渲染--数组

<!--首先在template部分确定插值表达式的位置并填充变量名-->
<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for = 'item in items'> {{item}}</li>
    </ul>
  </div>
</template>


<!--其次在script部分定义js的代码-->
<script>
  export default{
    name:"app",
    data(){
      return {
        title:"今日待完成事项",
        items:[
         "完成HTML标签学习",
        "完成CSS文字样式学习",
        "完成CSS盒模型学习",
        "完成Flex布局学习",
        "完成JavaScript入门学习"
        ]
      };
    }
  };
</script>



<!--最后在style里面完成一些样式-->
<style></style>

插值表达式渲染--对象

<script>
  export default{
    name:"app",
    data(){
      return {
        list:[
          {
           name:"张三",
          	grade:"三年级三班",
            mark:200
          },
          {
            name:"李四",
            grade:"三年级四班",
            mark:200
          },
           {
                  name:"王五",
                  grade:"三年级二班",
                  mark:270
          }
        ]
      };
    }
  };
</script>

响应式特性

响应式：数据变化，视图自动更新

data里面的数据都是响应式数据

访问数据：实例.属性名

修改数据：实例.属性名 = 值

Vue指令

Vue会根据不同的指令，针对不同的标签实现不同的功能

指定：带有v-前缀的特殊标签属性

动态解析标签内容

v-html可以动态解析标签内容，写在标签的属性当中

<p v-html = 'msg'></p>

处理用户输入

用户输入就是input、textarea，或者可以将select、单选、复选等当作用户输入来对待

v-model(双向绑定)

首先定义一个基础的HTML代码结构

<template>
  <p class='page'>{{message}}</p>
  <input type='text' v-model='message' placeholder='请输入你想输入的内容'/>
</template>

当我们在下面的input标签中输入内容的时候，上面的框会跟随改变

定义要用到的变量

<script>
  export default{
  name:'app',
  data(){
    return {
      message:""
    };
  }  
  }
</script>

v-show

作用：控制元素的显示和隐藏

语法：v-show="表达式",表达式的值为true则显示，表达式的值为false则隐藏

v-show的底层原理：本质上是控制css的display：none来控制显示隐藏

更加适合频繁切换显示隐藏的场景

v-if

作用：控制元素的显示和隐藏

语法：v-if="表达式",表达式值true显示，false则隐藏

v-if的原理是：基于条件判断，是否创建或删除元素

适合不频繁切换的场景

v-else和v-else-if

作用：辅助v-if进行判断渲染

语法：

• v-else 直接表达的是否则
• v-else-if="表达式"

v-on

作用：注册事件=添加事件+提供处理逻辑

可以添加任何事件

1. v-on:事件名 = 内联语句

可以将v-on:替换成@

<button v-on:click="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count++"></button>

1. v-on:事件名="methods"中的函数名

让提供的所有methods中的函数，this都指向当前实例new出来的Vue，可以提高代码的维护

<div id="app">
<button @click="fn">切换显示和隐藏</button>
<h1 v-show="isShow">Vue</h1>
  </div>  
  <script>
  conts app = new Vue({
  el:"#app",
  data:{
    isShow="true"
  }
  methods:{
  	fn(){
      
    }
  })
  </script>

v-on调用传参

<button @click="fn(参数列表)">按钮</button>
<script>
  const app = new Vue({
    el:'#app',
    methods:{
      fn(参数1,参数2){
      console.log('这是一个fn函数')
      }
    }
  })
</script>

v-bind

作用：动态设置html的标签属性

语法：v-bind:属性名="表达式"

可以把v-bind:属性名改成:属性名

<div id="app">
 <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      imgUrl:
      msg:'Hello Vue'
    }
  })
</script>

v-for

作用：基于数据循环，多次渲染整个元素

语法：v-for="(item,index) in 数组名"

item表示的是数组的元素

index表示的是数组的下标

<div id = 'app'>
<ul>
  <li v-for="(item,index) in list"></li>
</ul>
  </div>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      list:['西瓜','草莓','鸭梨','榴莲']
    }
  })
</script>