谷粒商城学习日记（18）——Vue语法入门
Posted wx61d4f5e9884c1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷粒商城学习日记（18）——Vue语法入门相关的知识，希望对你有一定的参考价值。
Vue语法入门
插值表达式与v-text,v-html插值表达式
双大括号，里面可以取vue对象里面的值，也可以是任何的表达式，只要有返回值是方法也可以。
<div id="app">
msg 1+1 hello()<br/>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
msg:"<h1>Hello</h1>"
,
methods:
hello()
return "World"
)
</script>
v-text,v-html
v-text显示只是原来的元素
v-html可以讲元素当html片段渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
msg 1+1 hello()<br/>
<!-- 用v-html取内容 -->
<span v-html="msg"></span>
<br/>
<!-- 原样显示 -->
<span v-text="msg"></span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
msg:"<h1>Hello</h1>",
link:"http://www.baidu.com"
,
methods:
hello()
return "World"
)
</script>
</body>
</html>
用v-bind:，简写为:。表示把model绑定到view。可以设置src、title、class等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 给html标签的属性绑定 -->
<div id="app">
<a v-bind:href="link">gogogo</a>
<!-- class,style class名：加上？-->
<span v-bind:class="active:isActive,text-danger:hasError"
:style="color: color1,fontSize: size">你好</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue(
el:"#app",
data:
link: "http://www.baidu.com",
isActive:true,
hasError:true,
color1:red,
size:36px
)
</script>
</body>
</html>
一般用于表单项，自定义组件
可以实现页面元素和model内对象的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 表单项，自定义组件 -->
<div id="app">
精通的语言：
<input type="checkbox" v-model="language" value="Java"> java<br/>
<input type="checkbox" v-model="language" value="php"> PHP<br/>
<input type="checkbox" v-model="language" value="Python"> Python<br/>
选中了 language.join(",")
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue(
el:"#app",
data:
language: []
)
</script>
</body>
</html>
以上是关于谷粒商城学习日记（18）——Vue语法入门的主要内容，如果未能解决你的问题，请参考以下文章