第一次搭建vue 环境
来源:互联网 发布:5s蜂窝移动数据设置 编辑:程序博客网 时间:2024/05/16 10:49
首先来说vue的作者是中国人,叫尤雨溪。vus.js官网这里面有详细的介绍;我写这个的目的是记住这些知识点,如果有人误踩坑可以点击官网看看也是一种收获。
首先来说vue的引入方式:
第一种是直接在本地html中引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
这里我是将
https://unpkg.com/vue/dist/vue.js链接在google里打开然后Ctrl+s 保存到本地文件然后放到js文件夹中直接在本地引用。
<script type="text/javascript" src="js/vue.js">
首先要搭建一个vue环境。
<div id="app"> {{message}}</div>
var app= new Vue({ el:'#app', data:{ message: 'hello vuejs', seen: true }, methods:{ toggle:function(){ this.seen=!this.seen; } } })
这里的var app=new Vue({
})中v必须是大写和原声js中声明一个新的数组,对象,是保持一致的,
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript" src="js/vue.js"></script> <style> .box{ height: 100px; width: 100px; background: red; } </style></head><body> <div id="app"> <input type="" name="" id="inp" v-model="message" v-bind:title="message"> <input type="" name="" v-bind:placeholder="message"> <div id="content" > {{message}} </div> <button v-on:click="toggle">点击</button> <button @click="toggle">点击</button> <div class="box" v-if="seen"></div> </div> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div></body></html><script > var app= new Vue({ el:'#app', data:{ message: 'hello vuejs', seen: true }, methods:{ toggle:function(){ this.seen=!this.seen; } } })</script><script > var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })</script>
阅读全文
0 0
- 第一次搭建vue 环境
- Vue开发环境搭建
- vue环境搭建
- Vue.js环境搭建
- vue环境搭建
- vue开发环境搭建
- Vue基本环境搭建
- vue.js环境搭建
- vue 开发环境搭建
- vue开发环境搭建
- vue环境搭建
- vue环境搭建详解
- vue环境搭建
- vue-cli 环境搭建
- Vue环境搭建
- vue入门--环境搭建
- vue.js环境搭建
- vue环境搭建
- CAS(3)——Cas Server中各配置文件介绍
- 如何写一篇原创放射学研究论文(英文)
- 为什么ios工资那么高
- 验证码破解技术四部曲之使用卷积神经网络(四)
- Cas(4)-更改认证方式
- 第一次搭建vue 环境
- 动态规划的单调队列优化(含多重背包)
- Cas(5)-修改Cas Server的其它配置
- (bzoj 1831: [AHOI2008]逆序对)<DP>
- SSM框架整合
- Oracle12c创建新用户提示公共用户名或角色无效
- Cas(06)-基于数据库的认证
- Linux下搭建FTP服务
- 设计模式(十三):迭代器模式