vue学习之vue基本功能初探

时间:2022-12-12 13:49:06

vue学习之vue基本功能初探:

采用简洁的模板语法将声明式的将数据渲染进 DOM:

<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});

v-bind方式绑定dom元素属性:

<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
});

v-if进行条件控制:

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

v-for进行循环显示数据:

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});

用v-on 指令绑定一个调用 Vue 实例方法的事件监听器:

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});

v-model 指令,使表单输入和应用状态间的双向绑定变得轻而易举。

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});

组件化,使用vue.component()创建一个组件。

<div id="app-7">
<ul>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ul>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})

组件的应用是vue的一个最大的好处, Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范
下面是一个关于组件的预想结构:
<div id="app">
     <app-nav></app-nav>
     <app-view>
     <app-sidebar></app-sidebar>
     <app-content></app-content>
     </app-view>
</div>

vue学习之vue基本功能初探的更多相关文章

  1. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;四&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;基本工作和创建&rpar;

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;六&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;项目说明-Babel&rpar;

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;五&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;PyCharm&rpar;

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;三&rpar;&equals;&equals;&equals;&gt&semi;组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  6. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;二&rpar;&equals;&equals;&equals;&gt&semi;组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;一&rpar;&equals;&equals;&equals;&gt&semi;基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. vue学习之一vue初识

    一.vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...

  9. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;七&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;路由Router&rpar;

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

随机推荐

  1. Linux的fasync驱动异步通知详解【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51851338 版权声明:本文为博主原创文章,未经博主允许不得转载. 工作项目用有 ...

  2. Linq 查询结果 可能遵循 2 &&num;186&semi;,2&&num;185&semi;,2 &&num;178&semi;,&period;&period;&period;&period;&period;&period;增长计算

    static void Main(string[] args) { , , , , , , , , }; var obj = from item in array orderby item ascen ...

  3. vector与set区别&lpar;基础知识&rpar;

    首先,vector是序列式容器而set是关联式容器.set包含0个或多个不重复不排序的元素.也就是说set能够保证它里面所有的元素都是不重复的.另外对set容器进行插入时可以指定插入位置或者不指定插入 ...

  4. 【原创】贴片电容的测量方法。。。这是我从自己QQ空间转过来的,本人实操!

    电容不工作一般分为3种情况,漏电.击穿.无电容.一般检测用万用表检测阻值一般调在10K-20K为测量标准,特别是贴片电容.把万用表的笔尖点在贴片电容的两侧,如下图测量: l1.jpg l2.jpg l ...

  5. Android 根据EditText搜索框ListView动态显示数据

    根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...

  6. (1)ActivityThread分析

    1. 入口. 曾经一直都说Activity的人口是onCreate方法.事实上android上一个应用的入口,应该是ActivityThread.和普通的java类一样,入口是一个main方法. pu ...

  7. 积累的VC编程小技巧之列表框

    1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...

  8. hdu 5635 LCP Array(BC第一题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5635 LCP Array Time Limit: 4000/2000 MS (Java/Others) ...

  9. &lbrack;Swift&rsqb;LeetCode11&period; 盛最多水的容器 &vert; Container With Most Water

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  10. 区块链与Git版本工具的比较

    区块链与Git版本工具的比较 来源:http://www.jianshu.com/p/b96b98983df6 作者: 梁波林  相同点: 1. 分布式存储方案 2. 链式数据 3. 去中心化 4. ...