Vue的基本使用:
<body>
<div id="app">
<h2> {{message}} </h2> //mustache语法
</div>
<script src="./node_modules/axios/dist/axios.min.js"></script> //引包
<script>
let obj = new Vue({ // new一个Vue
el:"#app", //把Vue挂在到div上
data:{
message:"张启山" //定义要渲染的内容
}
})
</script>
//我这里没有把缩进改成两个空格
//v-one会限制响应式的编程
<body>
<div id="app">
<h2 v-once> {{message}} </h2> //在控制台改变 message 的值不起作用
<h2> {{message}} </h2>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let obj = new Vue({
el:"#app",
data:{
message:"裘德考",
}
})
</script>
</body>
//v-text 其实和 mustache 是一样的 更多的是使用mustache 也就是 "{{}}"这东西
//这就没什么好讲的
//v-html可以解析字符串中的html内容
<div id="app">
<h2 v-html="url"></h2> //会变成一个连接
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let obj = new Vue({
el:"#app",
data:{
url:'<a href="http://www.baidu.com">请叫我小度姐姐</a>'
}
})
</script>
</body>
//v-pre可以把值原封不动的返回
<body>
<div id="app">
<h2 v-pre>{{message}}</h2> //{{message}}
<h2> {{message}} </h2> //{{陈皮}}
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let obj = new Vue({
el: "#app",
data: {
message: "陈皮",
}
})
</script>
</body>
//v-cloak 隐藏页面内容
<style>
[v-clock]{
display: none;
}
</style>
<body>
<div id="app" >
{{message}}
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
setTimeout(function () {
let obj = new Vue({
el: "#app",
data: {
message: "解连环",
}
})
}, 1000)
</script>
</body>
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
