Vue语法入门
创建VueDemo创建
使用vue有两种方式
一种直接导出vue.js到项目，页面引入即可
一种使用npm包管理的方式创建
这里推荐使用第二种
1.创建文件夹vueDemo
打开终端控制台
npm init -y
初始化项目，生成了一个package.json文件，说明他是一个npm管理的项目
npm install vue
安装后在项目node_modules里有vue
在VSCode中安装vue 2 snippets语法提示插件，在谷歌浏览器中安装vue-devtool
vue对象结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
首先引入js
<script src="./node_modules/vue/dist/vue.js">
其次声明div id
<div id="app">
</div>
new Vue()对象
el：与哪个元素绑定，也就是作用域
data：数据对象
methods:声明方法，都可以在这里
View-model数据动态绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<h1> {
{
name}} ,非常帅，有{
{
num}}个人为他点赞</h1>
</div>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({
//生成vue对象
el: "#app",//绑定元素 div id="app" // 可以指定恰标签，但是不可以指定body标签
data: {
//封装数据
name: "张三", // 也可以使用{} //表单中可以取出
num: 1
},
methods:{
//封装方法
}
});
//还可以在html控制台vm.name
//2、双向绑定,模型变化，视图变化。反之亦然。
</script>
</body>
</html>
可以改变输入框的值下面的值也会改变
也可以用网页控制台输入vm.num=100
这种改变两个的值
vue事件
//v-xx：指令 通过指令来绑定方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
v-model实现双向绑定
<button v-on:click="num++">点赞</button>
v-on:click绑定事件，实现自增
<button v-on:click="cancel">取消</button>
回调自定义的方法
<h1> {
{
name}} ,非常帅，有{
{
num}}个人为他点赞{
{
hello()}}</h1>
</div>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({
//生成vue对象
el: "#app",//绑定元素 div id="app" // 可以指定恰标签，但是不可以指定body标签
data: {
//封装数据
name: "张三", // 也可以使用{} //表单中可以取出
num: 1
},
methods:{
//封装方法
cancel(){
this.num -- ;
},
hello(){
return "1"
}
}
});
还可以在html控制台vm.name
//2、双向绑定,模型变化，视图变化。反之亦然。
//3、事件处理
//v-xx：指令
//1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>
</body>
</html>