索引
一、认识
官网：
https://cn.vuejs.org/
作者：
尤雨溪，据说现在是阿里P8
首先，官方说是渐进式js框架，对于后端程序员来说，我觉得渐进式的意思是指：可以通过操作很少的DOM甚至不需要操作DOM元素，就能轻易完成数据和视图的绑定。
它不推荐再使用jQuery
最后，抓住它三个关键词就行了：js框架、简化DOM操作、响应式数据驱动
二、入门
先把官网的例子看一看，入门肯定要写一遍hello world
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{
{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
效果：数据绑定上了
el的值就是css选择器，data里放数据
三、指令
v-text
作用：设置标签的文本值
简写：{
{}}
效果：它会完全替换掉里边的文本，{
{}}是这个指令的简写
所以：各有各的应用场景，要么完全替换，要么替换部分
<div id="app">
<h1 v-text="message">耗子尾汁</h1>
<h1 v-text="info">耗子尾汁</h1>
<h1>{
{message}}耗子尾汁</h1>
</div>
var app = new Vue({
el: '#app',
data: {
message: '用户名：break',
info: '用户名：java程序猿'
}
})
v-html
作用：设置标签的innerHTML
<div id="app">
<p v-html="context"></p>
<p v-text="context"></p>
</div>
var app = new Vue({
el: '#app',
data: {
context: "<a href='#'>一个a标签</a>"
}
})
v-on
作用：给元素绑定事件
简写：@
<div id="app">
<input type="button" value="呆鸡" v-on:click="go" />
<input type="button" value="划过" v-on:mouseenter="go" />
<input type="button" value="双鸡"
最低0.47元/天 解锁文章
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
