Vue.js基础
一.Vue基础:
1.Vue基础代码结构与插值表达式:
<body>
<div id="app">
<p>{
{
message}}</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message:"学习Vue"
}
})
</script>
值得注意的是,当网络较慢时,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{
{
message}}</p>
</div>
2.Vue指令:v-text和v-html
<!--
v-text:不能识别标签,只输出文本
v-html:设置元素的innerHTML,内容中有html结构的代码会被解析
-->
<body>
<div id="app">
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:"<a href='https://www.baidu.com'>百度一下</a>"
}
})
</script>
运行结果:
3.Vue指令:v-bind
v-bind:用于绑定属性的指令
v-bind有3种使用方法:
- 直接使用指令
v-bind
<body>
<div id="app">
<input type="text" v-bind:value="newValue" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
newValue:"这是新的Value",
}
})
</script>
运行结果:
2. 使用简化指令:
<body>
<div id="app">
<input type="text" :value="newValue" />
</div>
</body>
- 在绑定的时候,拼接绑定内容:
:value="newValue + ', 这是追加的内容'"
<body>