实操 vue全套教程 _vue

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

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

文章插图

Vue的安装方式：

1.1 使用CDN方法(初学者使用)
也可以直接使用CDN的方式引入，代码如下：
<script src=https://www.isolves.com/it/cxkf/kj/2022-08-02/"https://cdn.jsdelivr.NET/npm/vue/dist/vue.js">1.2Vue-cli脚手架
利用Vue-cli 脚手架构建Vue项目，在后面第七点详细讲解。(中大型项目中推荐使用) 。
2.第一个Vue程序 1、创建一个 html 文件
2、引入 Vue.js
<script src=https://www.isolves.com/it/cxkf/kj/2022-08-02/"https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">完整示例：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>贝西说</title><!--1.引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><!--view视图--> <div id="App"><input type="text" v-model="message"/>{{message}} </div> <script>var vue=new Vue({el:"#app",/*model数据*/data:{message:"hello,vue"}}); </script></body></html>

演示效果：（视图驱动数据，数据驱动视图）

文章插图

二、基础语法

v-bind

v-bind就是用于绑定数据和元素属性的
完整示例：

<body><div class="app"><a v-bind:href="url">点我</a></div> <script>var app = new Vue({el:'.app',data:{url:"https://www.baidu.com",}}); </script></body>

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class

<body><div class="app"><a v-bind:href="url">点我</a><img v-bind:src="imgsrc" width="200px"/></div> <script>var app = new Vue({el:'.app',data:{url:"https://www.baidu.com",imgsrc:"https://cn.vuejs.org/images/logo.png"}}); </script></body>

注意：
<div class="app"><a v-bind:href=https://www.isolves.com/it/cxkf/kj/2022-08-02/"url">点我