vue获取文本框内容_vue 入门总结（不完全）

最新推荐文章于 2024-02-28 14:21:58 发布

weixin_39669769

最新推荐文章于 2024-02-28 14:21:58 发布

阅读量1k

点赞数

文章标签： vue获取文本框内容

插值：{{}}

指令：

v-text 文本写入html标签

引入vue文件或者网址

</head>

<body>

</div>

</body>

var hh = new Vue({

el: "#div",

data: {

msg: "<h3>此木土狗</h3>"

}

})

</script>

v-html 解析标签添加内容不建议使用（不使用）

引入vue地址或者网址

</head>

<body>

</div>

</body>

var add = new Vue({

el: "#div",

data: {

msg: "<h1>张三</h1>"

}

})

插值表达式：

</head>

<body>

</div>

</body>

var dv = new Vue({

el: "#div",

data: {

cc: "此木土狗",

ys: "6",

obj: {

name: "晓明",

age: 24,

xb: ["", "晓", "明", ],

fun: function() {

return "真帅！！！！"

}

})

</script>

v-bind (可缩写成 ：) 属性绑定控制style标签

-没办法再html里写所有有-的属性 -后面字母大写（font-size）===（fontSize）

</head>

<body>

<p :style="{color:ys1,fontSize:Z+'px'}">啊实打实打算大苏打大大大</p>

<div v-bind:style="[ys,z]">十大大苏打实打实的啊大苏打</div>

<div :style="[ys1,z]">十大大苏打实打实的啊大苏打</div>

</div>

</body>

var add = new Vue({

el: "#div",

data: {

img: "./h-qb.jpg",

zt: {

color: "pink"

ys: {

background: "red",

color: "yellow"

ys1: {

background: "green"

lj: "&?del.php",

z: {

fontSize: "26px"

Z: 36,

}

})

</script>

v-bind 单向绑定

· .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)

· .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

· .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

</head>

<style>

</style>

<body>

</div>

</body>

var a = new Vue({

el: "div",

data: {

msg: "晓明",

axb: "green"

}

})

</script>

v-model 双向绑定

from表单双向绑定

· .lazy - 取代 input 监听 change 事件

· .number - 输入字符串转为有效的数字

· .trim - 输入首尾空格过滤

</head>

<body>

</form>

</div>

</body>

var a = new Vue({

el: "div",

data: {

mag: null

}

})

</script>

v-on 事件绑定可以缩写成（@）后面直接写事件名称

· .stop - 调用 event.stopPropagation()。

· .prevent - 调用 event.preventDefault()。

· .capture - 添加事件侦听器时使用 capture 模式。

· .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

· .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

· .native - 监听组件根元素的原生事件。

· .once - 只触发一次回调。

· .left - (2.2.0) 只当点击鼠标左键时触发。

· .right - (2.2.0) 只当点击鼠标右键时触发。

· .middle - (2.2.0) 只当点击鼠标中键时触发。

· .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

</head>

<body>

</div>

</body>

var a = new Vue({

el: "#div",

data: {

pp: function() {

alert(33)

oo() {

alert(66)

}

})

v-show 展示或隐藏如果是隐藏点击展示如果是展示点击隐藏 css样式显示隐藏

ture显示 false隐藏

</head>

<body>

</div>

</body>

var app = new Vue({

el: '#div',

data: {

msg: "真帅！！！！",

f: true

methods: {

show() {

this.f = !this.f;

}

})

</script>

v-if , v-else , v-else-if （判断）

</head>

<body>

</div>

</body>

var a = new Vue({

el: "div",

data: {

mag: 0

}

})

</script>

v-for for循环里面写（值，下标）内容页面写{{值、或者下标}}-------{{值、或者下标}}

v-for （值，下标） in 对象

</head>

<body>

<ul>

</ul>

</div>

</body>

var a = new Vue({

el: "div",

data: {

obj: {

id: 1,

name: "晓明"

}

})

</script>

Placeholder 占位符

placeholder 文本框里灰色的字体

书写格式placeholder=”” 输入你向再文本框显示的灰色字体输入文字后灰色字体消失

label 标签显示内容

methods 事件

methods{}书写格式

循环数组接受一个函数

这个是删除大于10的数

var arr = [1,3,56,45,8,9,1,21,4,545,6]

var a=arr.filter(function(v){

if(v>10){

return true;

}else{

return false;

}

})

methods 计算属性每次都会计算

</head>

<body>

<input type="text" name="" id="" v-model="ming"> {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}}

{{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}}

</div>

</body>

var a = new Vue({

el: "#div",

data: {

xing: "李",

ming: "四",

methods: {

mingzi() {

return this.xing + this.ming + Date.now();

}

})

</script>

computed 计算属性只计算第一次计算出来的数值后面的不会在计算

</head>

<body>

<input type="text" name="" id="" v-model="ming"> {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}}

</div>

</body>

var a = new Vue({

el: "#div",

data: {

xing: "李",

ming: "四",

computed: {

mingzi() {

return this.xing + this.ming + Date.now();

}

})

</script>

侦听器 watch 侦听的是数据的变化

侦听器的属性名和data里的的名是一样的

</head>

<body>

<input type="text" name="" id="" v-model="ming"> {{mingzi}}

</div>

</body>

var a = new Vue({

el: "#div",

data: {

xing: "",

ming: "",

mingzi: "",

methods: {

watch: {

xing(newval, oldval) {

// console.log(newval);

// console.log(oldval);

this.mingzi = oldval + this.ming

ming() {

}

})

</script>

ref 获取dom对象获取想要的内容

</head>

<body>

</div>

</body>

var a = new Vue({

el: "#div",

data: {

sz: "123",

sz1: "456",

methods: {

dj() {

// alert(3)

alert(document.getElementsByTagName("p")[1].innerHTML);

}

})

</script>

vue学习知识！！！！！！！

weixin_39669769

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue获取文本框内容_vue 入门总结（不完全）

插值：{{}}指令：v-text 文本写入html标签引入vue文件或者网址 <script src=".vue-v2.6.10.js"></script></head><body> <div id="div"> <h1 v-text="msg"></h1> </div></body>&...
复制链接

扫一扫