初识Vue:
1、要想vue工作,必须创建一个vue实例,且要传入一个配置对象。
2、容器里的代码依然符合html规范,只是汇入了一些特殊的vue语法。
3、容器里的代码被成为}【vue模板】。
4、{{xxx}},两个大括号中的为被替换的占位符,或者是JS表达式(表达式指的是会返回一个值的语句)(不能是JS语句)。
5、一个容器只能有一个vue实例接管(容器与vue实例关系是一对一)。
- # 结果:hello,无心
-
- <div id="root">
- //{{name.toUpperCase()}},可以转大写
- <h1>hello,{{name}}</h1>
- </div>
- <script>
- //把id为root的容器下的{{name}}替换为无心
- const x = new Vue({
- el: "#root",
- data: {
- name: "无心"
- }
- });
- </script>
vue会自动给data中的数据会自动作数据劫持做数据代理(数据代理:添加get与set方法)。
- const vm = new Vue({
- data: {
- name: "李义新"
- }
- })
-
- console.log(vm);
因为{{}}中可以显示vue对象的属性,Vue是把data中的数据添加到vue对象的属性中了。
插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
指令语法:
功能:用于解析标签(包括:标签属性,标签体内容、绑定时间等)。
写法:vue中有很多指令,且形式都是:v-???,此处我们只是拿v-bind举个例子。
v-bind可以给标签中任意属性绑定值。
单向绑定:绑定变量的改变会改变页面上对应的内容,但页面上的内容更改不会改变变量。
语法:v-bind:href="url",也可简写为::href,(简写后只需要写上冒号加属性名)。
- <div id="root">
- <a v-bind:href="url">百度链接</a>
- </div>
- <script>
- new Vue({
- el: "#root",
- data: {
- url: "https://www.baidu.com"
- }
- });
- </script>
双向绑定:绑定变量的改变会改变页面上对应的内容,页面上的内容更改也会改变变量的内容。
双向绑定一般用于表单元素上(如:input,select等)
v-model只能应用于表单类元素(输入类元素)上。
v-model:value:可以简写为v-model,因为v-model默认手机的就是value的值。
el后续绑定
- <div id="root">
- 请输入:<input type="text" :value="name">
- <br>
- </div>
- <script>
- const vue = new Vue({
- data: {
- name: "李义新"
- }
- })
- vue.$mount("#root");
- </script>
data函数式
- <div id="root">
- 请输入:<input type="text" :value="name">
- <br>
- </div>
- <script>
- new Vue({
- el: "#root",
- //data后不能是箭头函数
- data: function () {
- return {
- name:"liYi"
- };
- }
-
- //或者----------------------------------
- data() {
- return {
- name:"liYixin"
- };
- }
-
- })
- </script>
M:model模型
V:view视图
VM:viewModle视图模型
model数据经过view显示在页面,页面数据被更改后通过ViewModel返回给model。
v-on:click="点击事件函数名"。
v-on:click="点击事件函数名",可简写为@click="点击事件函数名"。
点击事件函数在对应定义模板的methods的定义中。
函数默认会接收一个event参数。
- <div id="root">
- <button v-on:click="showInfo">点击触发事件</button>
- <hr>
- </div>
- <script>
- let val = "xin";
- const vm = new Vue({
- el: "#root",
- data: {
- name: val
- },
- methods: {
- showInfo(event) {
- alert("hello");
- console.log("hello");
- }
- }
- })
- </script>
在定义调用函数时加上括号和参数就可以了,但是这样就无法接收event参数了
- <div id="root">
- <button @click="showInfo(666)">点击触发事件!</button>
- <hr>
- </div>
- <script>
- let val = "xin";
- const vm = new Vue({
- el: "#root",
- data: {
- name: val
- },
- methods: {
- showInfo(value) {
- console.log("值:"+value);
- }
- }
- })
- </script>
如果想接收自定义的参数和event,就必须用$event来占位(参数和$event的位置不限)。
- <div id="root">
- <button @click="showInfo($event,666)">点击触发事件!</button>
- <hr>
- </div>
- <script>
- let val = "xin";
- const vm = new Vue({
- el: "#root",
- data: {
- name: val
- },
- methods: {
- showInfo(event, value) {
- console.log(event);
- console.log("值:" + value);
- }
- }
- })
- </script>
- <div id="root">
- <!-- @keyup.enter代表回车键弹起 -->
- 请输入:<input type="text" @keyup.enter="showInfo">
- <hr>
- </div>
- <script>
- let val = "xin";
- const vm = new Vue({
- el: "#root",
- data: {
- name: val
- },
- methods: {
- showInfo(e) {
- //e.keyCode按下键的编码 e.key按下键的名称
- // if (e.keyCode != 23) //按的不是回车就退出
- // return;
- console.log(e.target.value);
- }
- }
- })
- </script>