Vue基础语法教程 ---(一)

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

怎么用？

小示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--挂载点-->
    <div id="app">
       <h1>{{message}}</h1><br/>
        <h2>{{name}}</h2>
    </div>
<!-- 导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 导入通信axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
   var app=new Vue({
       el: '#app',
       data: {
           message: "ksh",
           name: "kkk"
       }

   });
</script>
</body>
</html>

结果
在这里插入图片描述
小示例分解
通过上面的这个小示例，大家可以很直观的看到vue实例是如何与试图层进行绑定的。
下面对这个示例进行逐步分解

这个是对试图魔板和结果继续一 一映射，“ksh”->映射的是message这个字段的内容。kkk和上面的方式一样雷同。（如下图所示）
在这里插入图片描述
这个是vue实例和视图魔板之间的映射关系
在这里插入图片描述

Vue实例分解

在这里插入图片描述
el：
挂载点，指定要把vue实例挂载到那个有 ID选择器的标签上。
data：
给挂载的标签提供数据，例如上面的示例。
《h2》{{name}}《/h2>》
‘ 《h1》{{message}}《/h1》‘ 这种形式专业名词叫：文本插值，还有一种是绑定元素 attribute：

鼠标悬停几秒钟查看此处动态绑定的提示信息！

   《h1》标签和《h2》标签提供数据，这两个标签头难过{{}}这种形式获取（挂载的）vue实例提供的数据。
   这个data只是属性，还有一个Data()方法（稍后介绍）

上面这个对应到官方文档是“声明是渲染”
官网示例
在这里插入图片描述
vue官网文档链接：https://cn.vuejs.org/v2/guide/index.html#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93

条件与循环

这个和其他的语言一样是if判断和for循环，只是使用方式有点区别。

if判断

  <div id="app-3">
    <p v-if="seen">显示</p>
 </div>
 <script>
     var app3=new Vue({
         el: '#app-3',
         data: {
             seen: true
         }
     });
 </script>

结果：（TRUE）
在这里插入图片描述
（false）seen改成FALSE刚才显示的内容就隐藏了
在这里插入图片描述

for循环

<!--  for循环-->
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
  var vm1=new Vue({
        el: "#app-4",
        data: {
            todos: [
                {"text":'学习 JavaScript'},
                {"text":'学习 Vue'},
                {"text":'学习 整个牛项目'}
            ]
        }
    });

结果：
在这里插入图片描述

posted @ 2021-06-19 21:18  康世行  阅读(64)  评论(0)  编辑  收藏  举报