五、VUE学习笔记 | 青训营笔记

摘星_0827
129 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天 今天的课程主要是讲前端的设计模式思想，感觉没什么好记的，课下自学了Vue的基础知识

VUE 初识

vue的核心只关注视图层，方便与第三方库或即有项目整合

HTML+CSS+JS:视图

网络通信: axios

页面跳转：vue-router

状态管理：vuex

Vue_UI: ICE,ELement UI

MVVM (Model View -ViewModel)是一种软件架构设计模式，由微软和Silverlight的架构师开发，是一种简化用户界面的事件驱动编程方式

MVVM源自于经典的MVC MVVMDE的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，

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

VUE语法

vue代码规范

  • 使用两个空格 -进行缩进

  • 字符串使用单引号 -需要转义的地方除外

  • 不再有冗余的变量

  • 无分号

  • 行首不要以( [ or '''开头

  • 关键字后面加空格

  • 函数名后加空格

  • 坚持使用全等 ，不要使用==

引入vue

用到vue就需要先导入vuejs

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

<div id="app"> {{messing}} </div>
<script>
var vm=new Vue({ el:"#app", data:{ messing:"摘星带妹稳赢" } }) 
</script>

Html

使用 v-html 指令用于输出 html 代码：

<div id="app1" v-html="message"> </div>
<script> var vm2=new Vue({ el:"#app1", data:{ message:"<div>摘星啊</div>" } }) </script>

属性

HTML 属性中的值应使用 v-bind 指令。

<style>
.k1{ border:2px red solid; width:200px; height:300px; }
.k2{ border:2px yellow solid; width:200px; height:300px; }
</style>
<div id="k1" class="k1" v-bind:class="k2"> </div>
<script> var vm3=new Vue({ el:"#k1" ,data:{ k2:"k1" } }) </script>

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。我们在上面用到过

<div id="app">
<p v-if="seen">现在你看到我了</p> </div>
<script> new Vue({ el: '#app', data: { seen: true } })
</script?
参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

实例

<div id="app"> <pre><a v-bind:href="url">摘星带妹</a></pre> </div>
<script> new Vue({ el: '#app', data: { url: 'zhaixing.work' } }) </script>
v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

\

绑定事件

绑定事件时u，事件一定要写在methods里面，不然可能会报未定义

var vm=new Vue({ el:"#app", data:{}, methods:{ ssy:function (event) { alert("测试方法"); } } })

上面的绑定时间的名字，可以去Js里面查，名字都是一样的

<div id="app"> <p v-on:click="ssy">点击我</p> </div>

比如 单击就是 click

VUE脚手架

vue脚手架的作用是一键生成vue+webpack的项目模板，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦

安装Vue-cli脚手架

·1、首先需要安装node.js

去node.js官网下载，然后一路next安装。

命令 ;node -v 检查是否安装node npm -v 检查是否安装npm

2、安装全局脚手架

下载命令 npm install -g @vue/cli (这个可能有点慢，可以先安装cnpm 然后使用cnpm安装)

安装cnpm npm install -g cnpm -registry=https://registry.npm.taobao.org

安装命令 cnpm install -g @vue/cli

vue -V 测试是否安装成功脚手架

avatar
文章
阅读
粉丝