一、课程01
//GitHub上获取代码，速度很慢，使用了GitHub代理
git clone https://pd.zwc365.com/seturl/https://github.com/hemiahwu/vue-basic.git
//切换分支课程
git checkout lesson-1*25
二、课程02 el和data的使用
1、vue 官网 https://cn.vuejs.org/
2、安装开发工具vscode
3、安装插件Live Server、Vetur
4、设置-settings，转换为JSON，添加配置
"editor.formatOnType": true,
"editor.formatOnSave": true,
5、新建index.html
<head>
<meta charset="utf-8">
<title>VueJS Tutorials</title>
<link href="styles.css" rel="stylesheet" />
<!-- 引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--在定义的div对象之外，{{ }}都无法取值，只在当前范围内生效-->
<div id="vue-app">
<h1>hello,{{name}}</h1>
<p>你的年龄：{{age}}</p>
</div>
</body>
<script src="app.js"></script>
</html>
6、新建app.js
//实例化vue对象
new Vue({
el: '#vue-app',//element
data() {
return {
name: "wing",
age: "18"
}
}
})
7、运行
index.html中邮件Open with Live Server
image.png
三、课程03 methods方法的使用
//实例化vue对象
new Vue({
el: '#vue-app',//element
data() {
return {
name: "wing",
age: "18"
}
},
methods: {
//方法的不同方式
greet: function () {
return 'good night';
},
//拼接式
hello() {
return 'hello ' + this.name;
},
//反引号
haveLunch(rice) {
return `午饭吃的${rice}`;
}
}
})
HTML中调用方法
<p>{{greet()}}</p>
<p>{{hello()}}</p>
<p>{{haveLunch('大米')}}</p>
四、课程04 v-bind属性
标签属性前添加v-bind:或简写为:
<p> <a v-bind:href="url">百度</a></p>
<p><input type="text" :value="name"></p>
若需对标签进行解析，使用v-html
<p v-html="website"></p>
js中定义：
data() {
return {
name: "wing",
age: "18",
url: "http://www.baidu.com",
website: "<a href='http://www.163.com'>网易</a>"
}
}
网友评论