Vue简单入门及案例

VUE入门

简介:

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动

之前基于DOM----->(1)获取DOM元素 (2)操作DOM元素

Vue官网: https://cn.vuejs.org

Vue.js的优点

  1. 体积小

    压缩后33K

  2. 更高的运行效率

    基于虚拟dom,一种可以与预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM

  3. 双向数据绑定

    让开发者不用再去操作DOM对象,将更多精力投放到业务逻辑上;

  4. 生态丰富、学习成本低

    市场上有用大量成熟,稳定的vue.js的ui框架、常用组件,即用实现快速开发

使用场景广泛:譬如 web端,移动端,跨平台应用开发

一、vue第一个程序hello


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
    
    <script src="./js/vue.js">script>
head>
<body>

<div id="add">
    
    {
  {message}}
div>
body>

<script>
    /*创建一个Vue对象*/
    const app = new Vue({
    
        el: "#add",
        data:{
    
            //数据
            message:"今天是周一......"
        }
    })
script>
html>

二、el挂载点

挂载点:(1)作用范围:该标签内或者子标签内
挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器,因为		   id具有唯一性
挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签,但是必须双标签。不能在		  body和html标签上,建议挂载到div标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
    
    <script src="./js/vue.js">script>
head>
<body>

{
  {message}}
<div id="add">
    {
  {message}}
div>




body>


<script>
    /*创建一个Vue对象*/
    const app = new Vue({
    
        /*el挂载点*/
        el: "#add",
        data: {
    
            //挂载点:(1)作用范围:该标签内或者子标签内
            //挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器,因为id具有唯一性
            //挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签,但是必须双标签。不能在body和html标签上,建议挂载到div标签
            message: "明天是周二......"
        }
    })
script>
html>

三、data数据对象

  1. Vue中用到的数据定义在data中
  2. data中可以写复杂类型的数据
  3. 渲染复杂类型数据时,遵守js的语法即可

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
    
    <script src="./js/vue.js">script>
head>
<body>
<div id="add">
    {
  {message}}br>
    <span>{
  {message}}span>br>
    {
  {person}}br>
    {
  {person.name}}-------->{
  {person.age}}<br>
    <ul>
        <li>{
  {list[0].school}}li>
        <li>{
  {list[1].school}}li>
        <li>{
  {list[2].school}}li>
    ul>
div>
body>
<script>
    const app= new Vue({
    
        el:"#add",
        //数据标志
        data:{
    
            //基本数据类型和字符串
            message:"今天老白来了....",
            //对象
            person:{
    
                name:"张三",
                age:3
            },
            //集合
            list:[
                {
    school:"五道口"},
                {
    school:"南开"},
                {
    school:"北大"}
            ]
        }
    })
script>
html>

四、Vue指令

v-text v-html v-on基础

v-show v-if v-bind

v-for v-on补充 v-model

  1. 通过Vue实现常见的王爷效果
  2. 学习Vue指令,一案例巩固知识点
  3. Vue指令指的是以v-开头的一组特殊语法

4.1 v-text 设置标签的文本值(textContent)

  1. v-text指令的作用是:设置标签的内容(textContent)
  2. 默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容
  3. 内部支持写表达式

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
    
    <script src="./js/vue.js">script>
head>
<body>
<div id="add">
    <span v-text="message+',天气不好影响心情!'">冬冬span><br>
    <span>{
  {message+"嘿呀"}}span>
div>
body>
<script>
    const app= new Vue({
    
        el:"#add",
        //数据标志
        data:{
    
            message:"一周的阴天和雨天..."
        }
    })
script>
html>

4.2v-html:设置标签的innerHTML

内容中有html结构会被解析为标签

特点:

  1. v-html 指令的作用是设置标签的innerHTML
  2. 内容中有html结构会被解析为标签
  3. v-text指令无论内容是什么,只会解析为文本
  4. 解析文本使用v-text,需要解析html结构使用v-html

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
    
    <script src="./js/vue.js">script>
head>

你可能感兴趣的:(vue,vue)