Vue 的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../assets/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="number">{{msg}}</h1>
<h1 v-html="content" @click="gr"></h1>
<div :title="title" v-show="isShow"></div>
<button @click="show">mybutton</button>
<input type="text" v-model="x">
<div v-if="isshow"></div>
<!--<div>{{x}}</div>-->
<!--姓<input type="text" v-model="f">-->
<!--名<input type="text" v-model="l">-->
<!--<div>{{all}}</div>-->
<!--<div>{{count}}</div>-->
<div v-for="item,index of list" :key="item">
{{item}}
</div>
<script>
let app = new Vue({
el:'#app',
template:'',
data:{
msg:'world',
number:,
content:'<h1>23</h1>',
title:'this is666',
x:'',//双向绑定必须写占位。
f:'小',
l:'白',
count:,
isShow:true,
isshow:true,
list:[,,,]
},
computed:{ //用来计算属性的
all:function () {
return this.f+''+this.l
}
},
methods:{
gr(){
this.content = '<h4>2</h4>'
//如果data中不存在，就会去computed中找这个属性，如果找不到
// ，就会默认在methods中找。vue的机制与node一样
},
show(){
this.isshow =!this.isshow;
// this.isShow=!this.isShow;
//v-show 不会把元素从dom中移除
//v-if会让元素消失
}
},
watch:{ //监听
f(){
this.count++;
},
l(){
this.count++;
}
}
}) </script>
</body>
</html>
v-model = 'content' {{contents}} //vue 双向视图的绑定
v-text 只能返回一个文本内容
v-html 不仅可以返回文本内容还可以返回html标签
v-for item ,index in items :key='index'
//vue的for循环时，必须绑定一个：key的属性 不然会有一个警告 并且也会提升渲染性能。
需要注意的是 key的值不能相同，所有如果在遇到如数组的情况下 ，我们可以使用index去暂时代替。建议并希望这样做。
v-bind 可以缩写成 ：
v-on 可以缩写成@一个事件名
v-show 可以动态的让元素消失或者隐藏 但是不会让元素移除
v-if v-else v-else-if 也可让元素消失或者隐藏 但是他会直接让这个元素直接移除。
在使用双向绑定的时候。我们需要在data内进行一个占位操作。即设置一个需要解析的属性名称。
//===
methods 在vue中是用来写逻辑方法的
computed 在vue中是用来计算属性的。
watch：是用来监听某个元素或者属性的变化的。
Vue 的语法的更多相关文章
- 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 ...
- idea 添加 VUE 的语法支持和开发
<一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- idea 添加 VUE 的语法
1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...
- Vue模板语法（一）
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
随机推荐
- PHP的curl查看header信息的功能（包括查看返回header和请求header）
PHP的curl功能十分强大,简单点说,就是一个PHP实现浏览器的基础. 最常用的可能就是抓取远程数据或者向远程POST数据.但是在这个过程中,调试时,可能会有查看header的必要. 如下: ech ...
- Spring Boot开发Web应用
静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...
- git排错
解决: 将远程仓库中除.git以外的所有文件删除,然后执行 git config --bool core.bare true 然后客户端重新push即可解决问题 还要注意远程仓库权限方面...
- Identity（四）
本文摘自:ASP.NET MVC 随想录——探索ASP.NET Identity 身份验证和基于角色的授权,中级篇 探索身份验证与授权 在这一小节中,我将阐述和证明ASP.NET 身份验证和授权的工作 ...
- 讲一下Asp.net core MVC2.1 里面的 ApiControllerAttribute （转载）
ASP.NET Core MVC 2.1 特意为构建 HTTP API 提供了一些小特性,今天主角就是 ApiControllerAttribute. (注:文章是18年2月份的,所以文章提到了cor ...
- 学习angularjs的ng-hide和ng-disabled
一,页面上有一个checkbox和一个文本框.切换checkbox能对文本框输入文本与否: <input type="checkbox" ng-model="ckS ...
- Luogu P2261 [CQOI2007]余数求和
最近中考放假几天都在怼一道BJOI2018的水题,但卡死在90pts跑不动啊! 然后今天发现终于过了然而Hack的数据全RE了然后就开始找新的题目来找回信心. 然后发现智能推荐里有这道题,然后想了1m ...
- python 的zip 函数小例子
In [57]: name = ('Tome','Rick','Stephon') In [58]: age = (45,23,55) In [59]: for a,n in zip (name,ag ...
- 【强化学习】python 实现 q-learning 例五（GUI）
本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10143579.html 感谢pengdali,本文的 class Maze 参考了他的博客, ...
- 【强化学习】python 实现 q-learning 例二
本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10134855.html 问题情境 一个2*2的迷宫,一个入口,一个出口,还有一个陷阱.如图 ...