Vue-入门

不复习不知道,一复习发现很多细节性问题,脑子里只有知识点大概的想法,却没有详细的概念,这就是基础知识不牢靠的原因。

– – 复习了半个多月,最近无意间翻到自己之前入门vue的Demo

小练习Demo(个人博客对接的是wordpress接口)地址http://vue.bozaiq.cn/#/ 具体没怎么优化

[toc]1、首先了解一些vue基础语法

插值表达式{{}} 可以写其他内容
v-cloak  

v-text  会覆盖元标签内容 2可以直接渲染不用标签v-cloak  直接显示值

v-html   将文本解析成html

v-bind  对标签的属性进行绑定 简写形式 :

  按钮

JQ 操作dmo  prop对标签属性绑定 .prop("value","按钮")

v-on:click=    绑定事件  简写形式@

v-model=      双向绑定  适用于标签中有value 一条标签只能使用一次 多次使用会不知道绑定那个v-model

:class 绑定样式 1、绑定数组 2、三元表达式 3、数组嵌套

:style   1、键值对写法 2、键值对对象json格式 多个data可以使用数组 []接收

v- for    循环四种对象 1、普通数组  2、对象数组 3、对象 4、迭代数字 5、默认以索引绑定当前,需要使用Key属性改变默认设置

v-if     销毁标签

v-show   隐藏标签

2、搭建项目 – -(脚手架)

– -新手学习语法的时候不推荐使用脚手架,因为有严格的语法检查,会报错

Vue-cli 安装

1.安装环境 cnpm — 使用淘宝镜像 快一点 (如果你有科学方法当我没说)

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

2. 安装vue-cli

 cnpm install vue -cli -g  // 3.0 以前 (不包含3.0)

 cnpm install @vue/cli -g // 3.0 及以后 

3.初始化项目

 vue init webpack 项目名称   // 3.0 以前 (不包含3.0)

 vue create 项目名称         // 3.0 及以后 

4.进入项目目录,安装模块

  cd 项目名称

  cnpm install 

5.启动项目

 cnpm run dev

3、DEOM

  • 未使用 脚手架
  • 直接引用 vue.js

— 双向绑定


        
    

运行结果

<!DOCTYPE html>

Document

暂无评论

发送评论 编辑评论

正在回复 的评论 :

				
上一篇
下一篇