一.初识vue
1.hello
<head> <meta charset="UTF-8"> <title>初识vue</title> <!-- 引入vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备容器--> <div id="root"> <h1>Hello.{{name}}</h1> </div> <script> Vue.config.productionTip = false; //创建vue实例,只传一个对象参数 const x = new Vue({ el:'#root',//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串 data:{//data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象 name:'尚硅谷' } }) </script>
2.一一对应
<body> <!--准备容器--> <div id="root1"> <h1>Hello.{{name}},{{address}}</h1> </div> <div id="root2"> <h1>Hello.{{name}},{{address}}</h1> </div> <script> Vue.config.productionTip = false; //创建vue实例,只传一个对象参数 new Vue({ el:'#root1',//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串 data:{//data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象 name:'尚硅谷', address:'北京' } }) new Vue({ el:'#root2', data:{ name:'guigu', address:'上海' } }) </script> </body>
3.可以使表达式
<body> <!--准备容器--> <!--注意区分表达式和代码,表达式会产生一个值--> <div id="root1"> <h1>Hello.{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1> </div> <script> Vue.config.productionTip = false; //创建vue实例,只传一个对象参数 new Vue({ el:'#root1', data:{ name:'atguigu', address:'北京' } }) </script> </body>
二、模板语法
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 处于标签体里的语法用插值语法
指令语法是处于标签属性的语法,用v-bing:/:-->
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a :href="url">点我去{{school.name}}学习1</a>
<a :href="url">点我去尚硅谷学习2</a>
</div>
</body>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'尚硅谷'
},
url:'http://www.atguigu.com'
}
})
</script>
三、数据绑定
<body>
<div id="root">
单向数据绑定:<input type="text" :value="name"><br>
双向数据绑定:<input type="text" v-model:value="name">
</div>
</body>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
四、el,data两种写法
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// const v = new Vue({
// //el:'#root',
// data:{
// name:'尚硅谷'
// }
//
// });
// console.log(v);
// v.$mount('#root');
new Vue({
el:'#root',
data() {
return{
name:'尚硅谷'
}
}
})
</script>
五、MVVM
<body> <div id="root"> <!-- view--> <h1>学校名称:{{name}}</h1> <h1>学校地址:{{address}}</h1> </div> </body> <script> //阻止vue在启动时生成生产提示 Vue.config.productionTip = false; //view model new Vue({ el:'#root', data:{//model name:'尚硅谷', address:'北京' } }) </script>
六、数据代理
<script> let num = 18; let person = { name:'张三', sex:'男' }; Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性可以枚举 // writable:true,//控制属性是否可以修改 // configurable:true,//控制属性是否可以被删除 //当有人读取person的age属性时,get函数就会被调用,返回值就是age的值 get() { return num }, //当有人读取person的age属性时,set函数就会被调用,且会收到改的具体值 set(value){ console.log('修改了值',value); num = value; } }); console.log(person) </script><script> let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get() { return obj.x; }, set(value) { obj.x = value; } }) </script><script> //阻止vue在启动时生成生产提示 Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address: '科技园' } }) </script>
七、事件处理
<body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <button v-on:click="showInfo1">点我提示信息1(不传参)</button> <button @click="showInfo2(66,&event)">点我提示信息2</button> </div> </body> <script> //阻止vue在启动时生成生产提示 Vue.config.productionTip = false; new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo1(event){ alert('同学你好1') }, showInfo2(num,event){ alert('同学你好2') } } }) </script><body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止默认事件--> <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a> <!--阻止事件冒泡stop--> <!--事件只触发一次once--> </div> </body> <script> //阻止vue在启动时生成生产提示 Vue.config.productionTip = false; new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ //e.preventDefault() alert("同学你好") } } }) </script><body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keyup.enter ="showInfo"> </div> </body> <script> //阻止vue在启动时生成生产提示 Vue.config.productionTip = false; new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ console.log(e.target.value) } } }) </script>