1, Vue Introducción
plug-in VSCode instalado
detrás del proyecto de desarrollo Vue, desarrollado usando una sola fila .vue, necesita algunos plugins para ayudarnos a identificar el archivo .vue. plug-in de extensión instalada, el punto de abrir para ver un botón de búsqueda, se puede introducir una búsqueda por palabra clave que desea plug-ins.
VScode atajo: https: //segmentfault.com/a/1190000007688656
Aquí se recomienda el desarrollo de varios plug-ins Vue:
jshint: js comprobar las especificaciones del código.
Embellecer: una clave para embellecer el plug-in de código.
Vetur: tapón de identificación del archivo .vue.
Javascript (ES6) fragmentos de código: consejos ES6 gramática.
Cambiar nombre automáticamente Tag: Cambiar automáticamente el nombre de la etiqueta. Etiquetas aparecen en pares, modificar la etiqueta de inicio, etiqueta final seguirá los cambios.
Cierre automático Tag: etiqueta de cierre automático. Para algunas etiquetas no estándar, este plug-in sigue siendo muy útil.
ayudante vue: Algunos códigos rápidos código de Vue.
vscode-iconos: Opcional. Proporciona muchos tipos de icono de las carpetas, los diferentes tipos de carpetas mediante un icono diferente, el archivo de hacer la búsqueda más intuitiva.
abrirá en el navegador: Opcional. Derecha se puede optar por abrir la página actual en el navegador predeterminado.
Introducción Vue
Vue (pronunciación / VJU /, similar a la vista) es un marco para la construcción de extremos frontal separada y. El comienzo es un buen jugadores nacionales, especialmente la lluvia cala desarrollado, ahora marco frontal popular del mundo. Vue desarrollo de páginas web es muy sencillo de utilizar, y mejorar el entorno técnico, activistas de la comunidad, antes y después del final de las habilidades necesarias para encontrar un trabajo!
la instalación y el uso vue
vue montaje dividen generalmente tres formas, la primera de ellas hace referencia a una etiqueta de script , el segundo está montado por NPM (administrador de paquetes nodo), por la línea de tercera orden vue-cli para instalar . Como un principiante, se recomienda instalar directamente a través del primer enfoque, centrado en el aprendizaje de su mente vue, en lugar de en la instalación.
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>
# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
Uso básico
Para utilizar Vue, Vue primera necesidad de crear un objeto y pasar parámetros en este objeto el, el parámetro es sinónimo de elemento, que se utiliza para encontrar un elemento raíz para hacer vue. Y podemos pasar un parámetro de datos, todos los valores de datos se pueden utilizar directamente en el elemento raíz {} {} utilizado. Código de la muestra es la siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
}
})
</script>
Otros métodos también se pueden añadir en objeto vue, esta propiedad diseñado para almacenar funciones propias. Los métodos de la función también se puede utilizar en la plantilla, y la función de los métodos de acceso a los datos en el valor, que sólo necesitan acceso a la propiedad por este nombre, no extra this.data nombres de los atributos de acceso .:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
2, sintaxis de la plantilla Vue
Texto
en html por {} {} (llaves) puede Vue insertar datos en un objeto de página web. Vue y el tiempo que se cambia el valor del objeto correspondiente, entonces el valor de la html bis tirantes cambiará inmediatamente.
<div id="app">
<p>{{username}}</p>
<button v-on:click="change">点击修改</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "xxx"
},
methods: {
change: function(){
this.username = 'China';
}
}
});
</script>
Si en el html {{}}, la primera representación de tiempo es completa, no quiero seguir los datos post-cambio y el cambio, puede utilizar el v-una vez instrucciones.
<p v-once>{{username}}</p>
Pantalla HTML nativa
A veces nuestro objeto Vue o código html fondo nos devuelve un segmento nativo, tenemos que hacer, entonces, si la representación directa por {}, al igual que la cadena de código html. Esta vez se puede realizar mediante instrucciones de v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>"
},
methods:{
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
Atributo vinculante
si queremos unir nuestras variables de objeto Vue en las propiedades del elemento HTML, entonces la necesidad de lograr a través de V-bind, y la propiedad no es necesaria en el {{}}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
<img v-bind:src="image" alt="">
<!-- 属性是不需要在{{}}中的-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>",
"image":"https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
