Vue.js基础详解

vue介绍

Vue.js&＃xff08;读音 /vjuː/&＃xff0c;类似于 view&＃xff09; 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是&＃xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层&＃xff0c;它不仅易于上手&＃xff0c;还便于与第三方库或既有项目整合。另一方面&＃xff0c;当与单文件组件和 Vue 生态系统支持的库结合使用时&＃xff0c;Vue 也完全能够为复杂的单页应用程序提供驱动。
vue是一款简单的mvvm&＃xff08;model-view-viewmodel&＃xff09;框架。

vue起步

vue的引入与Javascript其他库的引入相同&＃xff0c;通过一对闭合的script标签包裹

声明式渲染

vue是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM

var data&＃61;{msg:"世界舞王&＃xff0c;尼古拉斯-赵四"
}
// model-模型 数据

var box &＃61; new Vue({el:"#box",data:data
})
// viewmodel视图模型 用来将数据渲染到模板上
// 用new Vue 创建一个 Vue 对象
// el&＃xff1a;接选择器 类选择器&＃xff0c;id选择器等都可以

世界舞王&＃xff0c;尼古拉斯-赵四

现在我们就运用声明式渲染生成了我们第一个Vue应用。

除了给文本赋值&＃xff0c;我们还可以利用Vue绑定DOM元素属性

var box &＃61; new Vue({el:"#box",data: {msg: &＃39;页面加载于&＃39; &＃43; new Date().toLocaleString()}
})

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

这里我们遇到点新东西。你看到的 v-bind 属性被称为指令。指令带有前缀 v-&＃xff0c;以表示它们是 Vue 提供的特殊属性。可能你已经猜到了&＃xff0c;它们会在渲染的 DOM 上应用特殊的响应式行为。简言之&＃xff0c;这里该指令的作用是&＃xff1a;“将这个元素节点的 title 属性和 Vue 实例的 msg 属性保持一致”。
再次打开浏览器的 Javascript 控制台输入 box.msg &＃61; &＃39;新消息&＃39;&＃xff0c;就会再一次看到这个绑定了 title 属性的 HTML 已经进行了更新。
Vue更多的学习指令和组件。

条件与循环

Vue控制一个DOM元素的显示和隐藏也很简单&＃xff0c;只需运用指令v-if就可以了

new Vue({el: &＃39;#box&＃39;,data: {seen: true}
})

显示模式

当我们将data数据里的seen更改为false时&＃xff0c;我们会发现元素已经隐藏。

如果们需要将数据渲染到一个项目列表中&＃xff0c;那么我们就需要使用到v-for指令

new Vue({el: &＃39;#box&＃39;,data: {todos: [{ text: &＃39;学习 Javascript&＃39; },{ text: &＃39;学习 Vue&＃39; },{ text: &＃39;整个牛项目&＃39; }]}
})

1.学习 Javascript
2.学习 Vue
3.整个牛项目

在控制台里&＃xff0c;输入 box.todos.push({ text: &＃39;新项目&＃39; })&＃xff0c;你会发现列表中添加了一个新项。

处理用户事件

v-on可以绑定一个事件监听器。

new Vue({el: &＃39;#box&＃39;,data: {message: &＃39;Hello Vue.js!&＃39;},methods: {reverseMessage: function () {this.message &＃61; this.message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;)}
}
})

v-model可以实现模板和数据之间的双向绑定&＃xff0c;我们既可以通过改变数据改变值&＃xff0c;还可以通过改变模板内的值改变数据

new Vue({el: &＃39;#box&＃39;,data: {message: &＃39;Hello Vue!&＃39;}
})

组化应用构建

组件系统是 Vue 的另一个重要概念&＃xff0c;因为它是一种抽象&＃xff0c;允许我们使用小型、独立和通常可复用的组件构建大型应用

首先我们需要注册一个组件

Vue.component(&＃39;EXPle&＃39;, {template: &＃39;

然后我们需要为组件创建一个模板

我们可以用上面刚刚学到的v-for来为几个不同的标签防止不同的值
所以组件我们应当这样

Vue.component(&＃39;todo-item&＃39;, {// todo-item 组件现在接受一个// "prop"&＃xff0c;类似于一个自定义属性// 这个属性名为 todo。props: [&＃39;todo&＃39;],template: &＃39;

我们还要运用v-bind将指令穿如不同的值&＃xff0c;所以html应当这样修改

最后&＃xff0c;我们需要为box赋值

var app7 &＃61; new Vue({el: &＃39;#box&＃39;,data: {groceryList: [{ id: 0, text: &＃39;世界舞王&＃39; },{ id: 1, text: &＃39;尼古拉斯&＃39; },{ id: 2, text: &＃39;赵四&＃39; }]}
})

1.世界舞王
2.尼古拉斯
3.赵四

Vue 初学就到这里了&＃xff0c;相信你已经在脑子里确定了Vue的原理
model-view-viewmodel的概念也已经非常清楚了&＃xff0c;希望你能够在学习Vue的道路上越走越远&＃xff0c;最后感谢你的浏览。

喜欢的点个赞呗&＃xff01;