锐客网

  1. 首页 > 睿知 > it技术 > >

Vue基础知识总结（基础篇）

IT知识基础知识vue基础知识

实践是知识的母亲，知识是生活的明灯。这篇文章主要讲述Vue基础知识总结：基础篇相关的知识，希望能为你提供帮助。
1.Vue.js1.1Vue.js介绍
1.1.1 Vue.js是什么?Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
1.1.2 为什么使用Vue?

  1. 声明式渲染: 前后端分离是未来趋势
  2. 渐进式框架: 适用于各种业务需求
  3. 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习
1.2 Vue.js 基础
1.2.1 Vue.js的使用
  1. 在html页面使用script引入vue.js的库即可使用。
远程CDN
< script src="http://img.readke.com/220610/1J0563U4-0.jpg"> < /script>
本地
< script src="https://www.songbingjia.com/android/vue.min.js"> < /script>

2. Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.
代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义Vue实例，接管app区域。
4、定义model（数据对象）
5、在app中展示数据
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title> Document< /title>
< script src="https://www.songbingjia.com/js/vue.js" > < /script>
< /head>
< body>
  < !-- 2. 定义t1 div，此区域作为vue的接管区域 -->
< div id="t1">
  < !--双括号是VUE中的插值表达式,将表达式的值输出到HTML页面 -->
< h2> message< /h2>
< span> school.id:school.name< /span>
< ul>
< li> teacher[0].id:teacher[0].name< /li>
< li> teacher[1].id:teacher[1].name< /li>
< /ul>
< /div>

< /body>

< script>
//3. 创建vue实例
    var VM = new Vue(
var obj = new Vue(
  //定义 Vue实例挂载的元素节点,表示vue接管该div
el: "#t1",
//4.定义model模型数据对象
data:
message: "hello",
school: "id": 1,"name": "希望小学", ,
teacher: ["id":1 , "name": "张三","id": 2 , "name":"王五" ]

);

< /script>
< /html>

效果展示：
【Vue基础知识总结（基础篇）】
Vue基础知识总结（基础篇）

文章图片
< /head>
< body>
< div id="app">
< !-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
< h2 v-text="msg"> 天天好心情< /h2>
< !-- 使用插值表达式，不会覆盖 -->
< h2> 阿红:msg< /h2>
< !-- 拼接字符串 -->
< h2 v-text="msg+1"> < /h2>
< h2 v-text="msg+abc "> < /h2>
< /div>
< /body>
< script>
var obj = new Vue(
el: "#app",
data:
"msg": "学习vue的第一天！"

);
< /script>
< /html>
效果展示：
2. v-html指令作用：设置元素的innerHTML（可以向元素中写入新的标签）
代码实例：
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset=

    推荐阅读


    上一篇：Tcping命令工具

    下一篇：Tracetcp工具常用用法