vue.js学习实例一

1.数据绑定

html代码:

<div id="first" class="first">msg:{{msg}}</div>

js代码:

var vm=new Vue({
            el:‘#first‘,
            data:{msg:‘hello vue.js‘},
            created: function () {
                // `this` 指向 vm 实例
                console.log(‘a is: ‘ + this.msg)
              }
        });

执行效果:

msg:hello vue.js
时间: 2024-08-26 09:19:19

vue.js学习实例一的相关文章

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

vue.js学习之入门实例

之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. 首先看下实现的效果: 源码下载戳这里:源码 1.使用vue-cli脚手架创建项目 vue-cli init webpack tll 备注:使用webpack模板创建名为tll的项目,这里会按照提示输入一些项目基本配置,比如项目名称.版本号.描述.作者.是否启用eslint校验等等,不知道咋填的直接

vue.js学习之组件数据流详解

本文和大家分享的主要是vue.js组件数据流相关内容,一起来看看吧,希望对大家学习vue.js有所帮助. 一.组件 组件,可以说是现代前端框架中必不可少的组成部分.使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义.前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即.基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

Vue.js学习笔记(一) - 起步

本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1非常相似,如果有Angular 1相关的使用经验,上手会非常快. 相比较其他的React.Angular 2等MVVM框架,它更加的轻量,效率也更高,也能更好的与其他库集成. 它拥有以下几个出色的特性: 数据双向绑定 指令 模板 组件 当前最新的版本为2.1.4.后续也会在这个版本下演示Demo.

Vue.js学习笔记: 指令 v-on

Vue.js官方文档对于 v-on 这一常用指令提供了缩写方法,看看官网是怎么介绍的 <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a> 1.方法处理器 可以用 v-on 指令监听DOM事件 <div id="box">     <bu

vue.js学习笔记(Directives)

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令