初识vue——语法初解
这次我们按照官网上的教程对vue的语法进行一个初步的了解;
一、声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染仅DOM的系统:
1、我们在HelloWorld里面输入下面代码:
<template>
<div class="hello">
<div class="title">
{{ msg }}
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'This is a title'
}
}
}
</script>
2、接下来我们还可以绑定元素属性:
<template>
<div class="hello" @click="one()">
<div class="title">
{{ msg }}
<span v-bind:title="message">悬浮</span>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'This is a title',
message: '页面加载于' + new Date().toLocaleString(),
}
}
}
</script>
二、条件与循环
1、条件:
<template>
<div class="hello" @click="one()">
<div id="if">
<p v-if="seen">现在你看到我了~</p>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
seen: true
}
}
}
</script>
2、循环
<template>
<div class="hello" >
<div id="for">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
todos:[
{text: '玫瑰'},
{text: '红枣'},
{text: '枸杞'}
]
}
}} </script> <style scoped>
#for{
width: 100px;
margin: 0 auto;
color: lightsalmon;
}
</style>
三、处理用户输入
1、逆转消息
<template>
<div class="hello" >
<div id="reverse">
<p>{{ message_re }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
message_re: '玫瑰五宝茶'
}
},
methods:{
reverseMessage:function(){
this.message_re =this.message_re.split('').reverse().join('')
}
}}
</script> <style scoped>
#reverse button{
width: 100px;color: #ffffff;border: none;background: coral;height: 30px;border-radius: 10px;letter-spacing: 1px;
}
</style>
2、表单输入和应用状态的双向绑定
<template>
<div class="hello" >
<div id="show_input">
<p>{{ message_in }}</p>
<input v-model="message_in" />
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
message_in: '桂圆'
}
}}
</script>
四、组件化应用构建
组件系统是Vue里面另一个重要的概念,允许我们使用小型,独立的,复用率高的组件构建大型应用;
#main.js
Vue.component('doit-item', {
props: ['doit'],
template: '<li>{{ doit.text }}</li>'
}) new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
<template>
<div class="hello" >
<div id="doit">
<ol>
<doit-item v-for="item in groceryList" v-bind:doit='item' v-bind:key="item.id"></doit-item>
</ol>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
groceryList: [
{ id: 0, text: '金桔' },
{ id: 1, text: '柠檬' },
{ id: 2, text: '半柠半橘' }
]
}
}}
</script>
<style scoped>
#for,#doit{
width: 150px;margin: 0 auto;color: lightsalmon;
}
</style>
初识vue——语法初解的更多相关文章
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 第1章-初识Vue.js
一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...
- vue语法之拼接字符串
先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...
- Sublime Text2支持Vue语法高亮显示
1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...
- 人人开源分模块,非原生html报错,很难查找问题所在,有vue语法
<!DOCTYPE html> <html> <head> <title>学生表</title> #parse("sys/head ...
- 初识vue小结
初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...
- sublime text 3 vue 语法高亮
1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- vue语法精简(方便开发查阅)
vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...
随机推荐
- javascript属性操作
属性的读写 //属性添加 var obj = {x:1,y:2}; obj.z = 3; obj["m"] = 4; //属性的读取 var obj = {x: 1, y: 2, ...
- 互联网公司为啥不使用mysql分区表?
转:http://www.cnblogs.com/zhulin516114/p/7306708.html 缘起:有个朋友问我分区表在58的应用,我回答不出来,在我印象中,百度.58都没有听说有分区表相 ...
- Centos7-安装telnet服务
1,检查是否安装 telnet-server和xinetd rpm -qa telnet-server rpm -qa xinetd 2,如果没有安装过就安装 查找yum yum list |grep ...
- 2.CLI标准
CLI 简称(CLI标准) 通用语言架构 维基百科地址: http://zh.wikipedia.org/wiki/通用语言架构 是一个开放的 技术规范 .它是由 微软 联合 惠普 ...
- Windows任务计划程序起始于参数自动修改
Windows任务计划程序建立后,手工运行可以成功,但计划任务自动运行却不能成功,搜索网络,原来是起始于参数没有配置,这个参数的英文名字是start-in.它保证任务计划程序的WorkingDirec ...
- Oracle 视图 (待更新, 缓存)
参考: 视图.索引.存储过程优缺点: http://www.cnblogs.com/SanMaoSpace/p/3147059.html oracle视图总结(转):http://tianwei013 ...
- TP手册学习第三天
命令行先在cmd进入项目目录,再执行命令 生成index模块的Blog控制器类库文件:php think make:controller index/Blog 如果仅仅生成空的控制器则可以使用:php ...
- 在nagios中使用python脚本监控linux主机
在被监控端192.168.5.1101.先把getload.py放到/usr/local/nagios/libexec内[root@nhserver1 ~]# vim /usr/local/nagio ...
- LIUNX-Centos 7 编译GDAL
一.准备工作 安装编译环境 sudo yum install gcc gcc-c++ gcc-g77 flex bison autoconf automake bzip2-devel zlib-dev ...
- js函数知识
1.函数基本知识 通过函数可以封装任意条语句,在任何地方调用,js中用function关键字来声明, //基本格式,函数名,传递参数,代码块 function functionName(arg0,ar ...