学习vuejs的第一天(vuejs)
来源:互联网 发布:macola软件字段表 编辑:程序博客网 时间:2024/05/17 21:44
模板渲染{{}}直接可以读出data中的数据,若data中是属性值,用v-bind渲染到页面,简写:例如:有一个title的属性,要用data中的数据,则<div :title="message">或者<div v-bind:title="message">
<div id="app">{{ message }}</div>
条件和循环var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
<div id="app-3"><p v-if="seen">现在你看到我了</p></div>
var app3 = new Vue({el: '#app-3',data: {seen: true}})
<div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol></div>
调用实例中的方法 v-on:可以简写为@clcikvar app4 = new Vue({el: '#app-4',data: {todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]}})
<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆转消息</button></div>
数据双向绑定v-modelvar app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}})
<div id="app-6"><p>{{ message }}</p><input v-model="message"></div>
组件注册组件注册组件时,第一是组件模板的名字,也就是标签的名字,第二个是组件的内容,template:后面是组件内的标签内容var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}})
// 定义名为 todo-item 的新组件Vue.component('todo-item', {template: '<li>这是个待办项</li>'})
从父元素中获取data传入组件props:这个属性可以获取父元素传过来的值在注册组件的时候这样写构建组件模板<ol><!-- 创建一个 todo-item 组件的实例 --><todo-item></todo-item></ol>
Vue.component('todo-item', {// todo-item 组件现在接受一个// "prop",类似于一个自定义属性// 这个属性名为 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>'})用props接收一个叫todo的值
在组件中用v-bind将这个todo的值传过来,可以简写:<div id="app-7"><ol><!--现在我们为每个 todo-item 提供待办项对象待办项对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”,晚些时候我们会做个解释。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol></div>
组件初始化-构建函数
var app7 = new Vue({el: '#app-7',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其他什么人吃的东西' }]}})
阅读全文
0 0
- 学习vuejs的第一天(vuejs)
- vuejs 学习(一)
- vueJs的学习笔记(二)
- vueJs的学习笔记(四)
- VueJs学习
- vueJs
- vuejs
- VueJS
- vuejs
- vueJS
- vuejs
- vuejs
- Vuejs——(8)Vuejs组件的定义
- Vuejs——(8)Vuejs组件的定义
- Vuejs学习(一)简要的TODOList
- vuejs学习系列-vue-cli的安装
- vueJs 2.0学习笔记(一)
- vuejs学习小记 单次插值
- 记一次bug:错误: 找不到或无法加载主类 Test
- CentOS安装JDK
- python3下使用mysql
- Hybrid APP混合开发的一些经验和总结
- 钉钉消息发送
- 学习vuejs的第一天(vuejs)
- 从输入URL到显示页面,发生了什么?
- 百度定位获取不到坐标,返回码162
- web.xml报错
- Android命令行签名记录
- oracle 数据库常用语句
- 存储过程进行数据分页
- java 深入理解注解
- 【Centos7笔记八】双网卡配置和ssh配置