commit
bfcdb149a8
13 changed files with 12120 additions and 0 deletions
@ -0,0 +1,5 @@ |
||||
# Default ignored files |
||||
/shelf/ |
||||
/workspace.xml |
||||
# Editor-based HTTP Client requests |
||||
/httpRequests/ |
||||
@ -0,0 +1,8 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<project version="4"> |
||||
<component name="ProjectModuleManager"> |
||||
<modules> |
||||
<module fileurl="file://$PROJECT_DIR$/.idea/vue_demo.iml" filepath="$PROJECT_DIR$/.idea/vue_demo.iml" /> |
||||
</modules> |
||||
</component> |
||||
</project> |
||||
@ -0,0 +1,6 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<project version="4"> |
||||
<component name="VcsDirectoryMappings"> |
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" /> |
||||
</component> |
||||
</project> |
||||
@ -0,0 +1,12 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<module type="WEB_MODULE" version="4"> |
||||
<component name="NewModuleRootManager"> |
||||
<content url="file://$MODULE_DIR$"> |
||||
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
||||
</content> |
||||
<orderEntry type="inheritedJdk" /> |
||||
<orderEntry type="sourceFolder" forTests="false" /> |
||||
</component> |
||||
</module> |
||||
@ -0,0 +1,26 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>初识Vue</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>Hello, {{name}}， {{address}}， {{Date.now()}}</h1> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建Vue实例 |
||||
const x = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
name: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,34 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>Vue模板语法</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>插值语法</h1> |
||||
<h3>你好，{{name}}</h3> |
||||
<hr> |
||||
<h1>指令语法</h1> |
||||
<a v-bind:href="school.url">{{school.name.toUpperCase()}}</a> |
||||
<br> |
||||
<a :href="school.url">{{school.name}}</a> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false; |
||||
const x = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
user: { |
||||
name: 'Roger' |
||||
}, |
||||
school: { |
||||
name: 'leying', |
||||
url: 'http://www.baidu.com' |
||||
} |
||||
} |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,29 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>数据绑定</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<!--完整写法--> |
||||
单向数据绑定：<input type="text" v-bind:value="name"><br> |
||||
双向数据绑定：<input type="text" v-model:value="name"> |
||||
<hr> |
||||
<!--简略写法--> |
||||
单向数据绑定：<input type="text" :value="name"><br> |
||||
双向数据绑定：<input type="text" v-model:name="name"> |
||||
|
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false |
||||
new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
name: 'Roger' |
||||
} |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,34 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>el与data的两种写法</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>你好， {{name}}</h1> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false |
||||
const v = new Vue({ |
||||
el: '#root', |
||||
// data的函数式写法 |
||||
// data: { |
||||
// name: 'Roger' |
||||
// } |
||||
// data的函数式写法 |
||||
data: function () { |
||||
console.log('@@@', this) |
||||
return { |
||||
name: 'Roger' |
||||
} |
||||
} |
||||
}) |
||||
console.log(v) |
||||
// el的新写法 |
||||
v.$mount('#root') |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,27 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>Vue中的MVVM</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id='root'> |
||||
<h1>学校名称：{{name}}</h1> |
||||
<h1>学校地址：{{address}}</h1> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
data: function(){ |
||||
return { |
||||
name: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
} |
||||
}) |
||||
console.log(vm) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,47 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>回顾Object.defineProperty方法</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
|
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false |
||||
let number = 18 |
||||
let person = { |
||||
name: 'Roger', |
||||
sex: 'male', |
||||
// age: '18' |
||||
} |
||||
Object.defineProperty(person, 'age', { |
||||
// value: '18', |
||||
// enumerable: true, // 控制是否可迭代遍历 |
||||
// writable: true, // 控制是否可以修改 |
||||
// configurable: true //控制是否可以删除 |
||||
|
||||
// get: function () 用于当调用的时候再获取值，可以简写为 get() {} |
||||
get: function () { |
||||
console.log('获取age') |
||||
return number |
||||
}, |
||||
// set function() 用于修改数据是调用 可以简写 set() |
||||
set(value) { |
||||
console.log('新的值为', value) |
||||
number = value |
||||
} |
||||
}) |
||||
console.log(Object.keys(person)) |
||||
console.log(Object.keys(person).length) |
||||
for (let key in person) { |
||||
console.log(key) |
||||
console.log('@', person[key]) |
||||
} |
||||
|
||||
console.log(person) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,17 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>事件的基本使用</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
|
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue