Vue学习笔记1 模板语法

2020-09-17 Html前端 PV:

前言

最近确定的计划当中是html部分的开发，其中就包括Vue,所以准备系统的去学习一下整个网页开发，从html 语法、到 CSS 样式表、javascript 。现在到了框架部分。现在选择的第一个框架就是Vue+elementUI。

Vue简介

Vue，是一套用于构建
用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
下面是Vue的在前端中存在的架构位置：
架构图

安装

Vue作为一个JavaScriptMVVM的前端框架，其根本所在也是一个js代码文件，所以是可以直接当作普通js文件引用的方式：

1	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

另外一种方式是当开发大型项目的时候直接使用由官方提供的脚手架 vue-cli。通过脚手架直接新建整个项目模板。

语法基础

创建实例

使用Vue，需要创建实例：

var vmv=new Vuew({
   el:"#app",

})

通过创建实例来把数据渲染到DOM系统。

条件和循环

v-if用来做判断， v-for用来循环，如下图：

<span v-if="visible">   </span>

<ul>
    <li v-for="todo in todos "> 你的名字： {{todo}} </li>
</ul>

v-model可以轻松实现表单输入和应用状态之间的双向绑定。

自定义模板

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

模板语法

v-once 执行一次性的插值

原始html ,如果你想输出原始的html 语句， v-html来进行操作。

<p v-html="hrml">  <p>   

var vm=new Vue({
      el:"#app",
      data:{
          message:"点击打开",
          ck:false,
          hrml:"<span style='color:red'>我们都是i中国人</span>",
        
   
          ]
      },

class 与style绑定


  <el-checkbox v-bind:style="{color:textColor}">心跳</el-checkbox>


...

data:{
    color:"red",
}

`key` 的使用

因为vue为了能够更加高速的渲染界面，会默认直接复用已有的组件，所以例如：



<template v-if="x=== 2">
    <label>表单一</label>
    <input  placeholder="表单一" >



</template>
<template v-else>


    <label>表单二</label>
    <input placeholder="表单二">





</template>

上面的代码输入，表单一的输入框会被表单二复用，所以如果有要求不能复用，就需要使用type.

<template v-if="x=== 2">
    <label>表单一</label>
    <input  placeholder="表单一"  type="input1">



</template>
<template v-else>


    <label>表单二</label>
    <input placeholder="表单二" type="input2">





</template>

点击事件

点击事件一般用 v-on来绑定属性，这里需要注意的是，再绑定事件过程中，如果有调用原生事件的需求可以通用$event。例如：



  
   <form action="www">
     <input type="text" >
     <input type="submit" v-on:click="show('提交',$event)">

   </form>






    show:function(msg,event){
            if (event) {
      event.preventDefault()
    }
            alert(msg);
          }
                
              }

`

上面的实例中， event.preventDefault()是使用原生事件阻止表单按钮提交表单的原生事件。
event.stopPropagation()类似用法，作用是阻止事件的传播。

事件修饰符

Vue提供了事件修饰符来处理Dom事件传递的细节：

.stop 防止事件冒泡，类似于 stopPropagation(),阻止事件向内传递；
.prevent 等同于preventDefalut()，防止执行预设行为；
.capture,与冒泡事件相反，事件开始从内到外。
-.self ,智慧作用自身周围的点击事件
-.once，点击事件只作用一次

`v-model` 表单数据绑定

直接看例子

<select id="select" v-model="words"  >
  <option disabled >请选择</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>


</select>   
      <label>{{words}}</label>

而是用 v-for来动态添加数据：

<select>
   <option v-for="ca in cas" v-bind:value="ca.value">
     {{ca.text}}
      
   </option>

 </select>



 var vm=new Vue({
       el:"#app",
       data:{
           message:"点击打开",
          cas:[
            {value:"A" ,  text:"a"},
            {value:"B" ,  text:"b"},
            {value:"C" ,  text:"c"}
          ]
       
   
       },

`v-model`的修饰符

.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步。
.number 设置自动将用户输入值转为数值类型
.trim,自动设置输入过滤空白字符串

前言